Add this component

npx zentauri-ui add hash-generator

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Utilities

Hash generator for cryptographic hashing

Use the hash generator component to compute cryptographic hashes in real time. Type or paste text and see the hash output update instantly using the Web Crypto API.

SHA-256

Hash output

Hash generator variants playground

Pick an algorithm to preview the hash generator component live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Algorithm

SHA-256

Hash output

Using the useHash hook

You can also use the useHash hook directly — ideal for custom UIs or server-rendered forms where you only need the hashing logic.

import { useHash } from "@zentauri-ui/zentauri-components/hooks/useHash";

function HashDemo() {
  const { hash, isHashing } = useHash(input, "sha256");
  // ...render hash result
}

Hash: —

Hash Generator API

Generated from the package prop types and variant definitions.

HashGenerator

HashGeneratorProps

Variants

Prop	Type	Default
appearance	`default`	default
size	`lgmdsm`	md

State

Prop	Type	Default
onValueChange	`((value: string) => void) \| undefined`	none
value	`string \| undefined`	none

Behavior

Prop	Type	Default
algorithm	`HashGeneratorAlgorithm \| undefined`	none
readOnly	`boolean \| undefined`	none
showCopyButton	`boolean \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

HashGeneratorVariant

HashGeneratorVariantProps

Behavior

Prop	Type	Default
appearance	`'default' \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

CSS variable overrides

Hash generator CSS variables

Override these hash generator variables on :root, a theme selector, or a component wrapper.

18 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-hash-generator-bg: oklch(98.4% 0.003 247.858);
  --zui-hash-generator-border: #0000001a;
  --zui-hash-generator-fg: oklch(20.8% 0.042 265.755);
  --zui-hash-generator-header-bg: oklch(92.9% 0.013 255.508);
  --zui-hash-generator-label-fg: oklch(55.2% 0.046 257.417);
  --zui-hash-generator-placeholder: oklch(55.2% 0.046 257.417);
  --zui-hash-generator-ring-focus: #0000004d;
  --zui-hash-generator-output-bg: oklch(96.8% 0.007 247.896);
  --zui-hash-generator-output-fg: oklch(44.6% 0.043 257.281);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-hash-generator-bg-dark: oklch(12.9% 0.042 264.695);
  --zui-hash-generator-border-dark: #ffffff1a;
}

What it does

The hash generator component provides a text input area where users can type or paste content. The hash is computed in real time using the browser's built-in Web Crypto API and displayed in the output area below. A copy button in the header lets users quickly copy the hash to their clipboard.

The algorithm selector allows switching between SHA-1, SHA-256, SHA-384, and SHA-512 variants.

Composition and API

Pass the algorithm via the algorithm prop (default sha256). The component supports controlled mode via value and onValueChange props, as well as uncontrolled usage with internal state. The readOnly prop disables editing, and showCopyButton controls the visibility of the copy button.

Common use cases

The hash generator is ideal for developer tooling panels, security dashboards, password management interfaces, and educational tools where users need to compute cryptographic hashes without leaving the browser.

Accessibility

The component uses semantic HTML elements including textarea for input and proper labels. The copy button provides clear visual feedback when the hash is copied. Keyboard order and focus management should match production usage.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive components into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Hash Generator component work with Next.js App Router?

Yes. Import it like any other React component; the component uses client-side state and the Web Crypto API and works seamlessly with server components when used as a client boundary.

Can I customize the hash generator with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

What algorithms are supported?

The component supports SHA-1, SHA-256, SHA-384, and SHA-512 via the Web Crypto API. MD5 is not supported as it is not part of the Web Crypto specification and is considered cryptographically broken.

Is the input data sent to a server?

No. All hashing is performed client-side using the browser's built-in Web Crypto API. No data is transmitted to any server.