Add this component

npx zentauri-ui add secret-reveal

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.

Security

Secret reveal for security and credentials

Use the secret reveal component to display sensitive values that are masked by default. A toggle button lets users reveal or hide API keys, passwords, tokens, and other secrets with smooth transitions.

API Key•••••••••••••••

JWT••••••••••••••••••••••••••••••••••••••••••••••••

Password•••••••••••••••••••••••••

Secret reveal variants playground

Pick an appearance, size, and animation to preview the secret reveal component live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Appearance

Size

Animation

API Key•••••••••••••••

All appearances

Every shipped appearance token at a glance. Click any swatch to load it into the playground above.

default

•••••••

subtle

•••••••

muted

•••••••

primary

•••••••

blue

•••••••

cyan

•••••••

green

•••••••

lime

•••••••

emerald

•••••••

indigo

•••••••

purple

•••••••

pink

•••••••

rose

•••••••

sky

•••••••

teal

•••••••

yellow

•••••••

orange

•••••••

red

•••••••

slate

•••••••

gray

•••••••

zinc

•••••••

gradient-blue

•••••••

gradient-green

•••••••

gradient-red

•••••••

gradient-yellow

•••••••

gradient-purple

•••••••

gradient-teal

•••••••

gradient-indigo

•••••••

gradient-pink

•••••••

gradient-orange

•••••••

Secret Reveal API

Generated from the package prop types and variant definitions.

SecretReveal

SecretRevealProps

Variants

Prop	Type	Default
appearance	`bluecyandefaultemeraldgradient-bluegradient-greengradient-indigogradient-orangegradient-pinkgradient-purplegradient-redgradient-teal`+18	default
size	`lgmdsm`	md

State

Prop	Type	Default
value	`string \| undefined`	none

Behavior

Prop	Type	Default
initiallyRevealed	`boolean \| undefined`	none
label	`ReactNode`	none
labelPosition	`'top' \| 'side' \| undefined`	none
muteChar	`string \| undefined`	none
onVisibilityChange	`((revealed: boolean) => void) \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

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

SecretRevealVariant

SecretRevealVariantProps

Behavior

Prop	Type	Default
appearance	`'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'red' \| 'slate' \| 'zinc' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'subtle' \| 'muted' \| 'primary' \| null \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

SecretRevealAnimated

SecretRevealAnimatedProps

animated

State

Prop	Type	Default
value	`string \| undefined`	none

Behavior

Prop	Type	Default
animation	`SecretRevealAnimation \| undefined`	none
appearance	`'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'red' \| 'slate' \| 'zinc' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'subtle' \| 'muted' \| 'primary' \| null \| undefined`	none
initiallyRevealed	`boolean \| undefined`	none
label	`ReactNode`	none
labelPosition	`'top' \| 'side' \| undefined`	none
muteChar	`string \| undefined`	none
onVisibilityChange	`((revealed: boolean) => void) \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLDivElement> \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

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

CSS variable overrides

Secret reveal CSS variables

Override these secret reveal variables on :root, a theme selector, or a component wrapper.

118 variables

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

:root {
  --zui-secret-reveal-default-border: oklch(87.5% 0.01 258.338);
  --zui-secret-reveal-default-bg: oklch(96.8% 0.003 264.542);
  --zui-secret-reveal-subtle-bg: oklch(92.9% 0.013 255.508);
  --zui-secret-reveal-muted-bg: oklch(44.6% 0.043 257.281);
  --zui-secret-reveal-primary-border: oklch(20.8% 0.042 265.755);
  --zui-secret-reveal-primary-bg: oklch(20.8% 0.042 265.755);
  --zui-secret-reveal-blue-border: #2563eb;
  --zui-secret-reveal-blue-bg: oklch(93.5% 0.055 262.881);
  --zui-secret-reveal-cyan-border: #0891b2;
  --zui-secret-reveal-cyan-bg: oklch(95% 0.025 236.42);
  --zui-secret-reveal-green-border: #16a34a;
  --zui-secret-reveal-green-bg: oklch(94.2% 0.053 146.17);
  --zui-secret-reveal-lime-border: #65a30d;
  --zui-secret-reveal-lime-bg: oklch(93.9% 0.077 125.02);
  --zui-secret-reveal-emerald-border: oklch(69.6% 0.17 162.48);
  --zui-secret-reveal-emerald-bg: oklch(93.5% 0.062 163.17);
  --zui-secret-reveal-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-secret-reveal-indigo-bg: oklch(92.8% 0.067 276.37);
  --zui-secret-reveal-purple-border: oklch(43.8% 0.218 303.724);
  --zui-secret-reveal-purple-bg: oklch(92.4% 0.075 302.32);
  --zui-secret-reveal-pink-border: oklch(45.9% 0.187 3.815);
  --zui-secret-reveal-pink-bg: oklch(93.5% 0.048 3.82);
  --zui-secret-reveal-rose-border: oklch(64.5% 0.246 16.439);
  --zui-secret-reveal-rose-bg: oklch(93.2% 0.065 16.44);
  --zui-secret-reveal-sky-border: oklch(68.5% 0.169 237.323);
  --zui-secret-reveal-sky-bg: oklch(94.5% 0.041 237.32);
  --zui-secret-reveal-teal-border: oklch(70.4% 0.14 182.503);
  --zui-secret-reveal-teal-bg: oklch(94.1% 0.046 182.5);
  --zui-secret-reveal-yellow-border: oklch(79.5% 0.184 86.047);
  --zui-secret-reveal-yellow-bg: oklch(94.1% 0.06 86.05);
  --zui-secret-reveal-orange-border: oklch(70.5% 0.213 47.604);
  --zui-secret-reveal-orange-bg: oklch(93.5% 0.076 47.6);
  --zui-secret-reveal-red-border: #dc2626;
  --zui-secret-reveal-red-bg: oklch(93.9% 0.053 19.85);
  --zui-secret-reveal-slate-border: #475569;
  --zui-secret-reveal-slate-bg: oklch(92.8% 0.011 262.88);
  --zui-secret-reveal-gray-border: oklch(55.1% 0.027 264.364);
  --zui-secret-reveal-gray-bg: oklch(92.8% 0.007 264.36);
  --zui-secret-reveal-zinc-border: #52525b;
  --zui-secret-reveal-zinc-bg: oklch(92.9% 0.004 262.88);
  --zui-secret-reveal-gradient-blue-from: oklch(42.4% 0.199 265.638);
  --zui-secret-reveal-gradient-blue-to: oklch(43.8% 0.218 303.724);
  --zui-secret-reveal-gradient-green-from: oklch(44.8% 0.119 151.328);
  --zui-secret-reveal-gradient-green-to: oklch(45.3% 0.124 130.933);
  --zui-secret-reveal-gradient-red-from: oklch(44.4% 0.177 26.899);
  --zui-secret-reveal-gradient-red-to: oklch(45.9% 0.187 3.815);
  --zui-secret-reveal-gradient-yellow-from: oklch(47.6% 0.114 61.907);
  --zui-secret-reveal-gradient-yellow-to: oklch(47% 0.157 37.304);
  --zui-secret-reveal-gradient-purple-from: oklch(43.8% 0.218 303.724);
  --zui-secret-reveal-gradient-purple-to: oklch(45.9% 0.187 3.815);
  --zui-secret-reveal-gradient-teal-from: oklch(43.7% 0.078 188.216);
  --zui-secret-reveal-gradient-teal-to: oklch(45% 0.085 224.283);
  --zui-secret-reveal-gradient-indigo-from: oklch(39.8% 0.195 277.366);
  --zui-secret-reveal-gradient-indigo-to: oklch(43.8% 0.218 303.724);
  --zui-secret-reveal-gradient-pink-from: oklch(45.9% 0.187 3.815);
  --zui-secret-reveal-gradient-pink-to: oklch(45.5% 0.188 13.697);
  --zui-secret-reveal-gradient-orange-from: oklch(47% 0.157 37.304);
  --zui-secret-reveal-gradient-orange-to: oklch(44.4% 0.177 26.899);
  --zui-secret-reveal-fg: oklch(20.8% 0.042 265.755);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-secret-reveal-default-border-dark: oklch(27.9% 0.041 260.031);
  --zui-secret-reveal-default-bg-dark: oklch(21.6% 0.036 260.031);
}

What it does

The secret reveal component displays a value that is masked by default with dot characters. A toggle button switches between hidden and revealed states. The static variant uses React state for the toggle, while the animated variant offers framer-motion powered transitions including fade, slide-up, scale, and flip.

Combine with a label displayed above the value for context like "API Key" or "Password".

Composition and API

Pass the secret value via the value prop and optionally a label. Choose from the full appearance palette and size scale. The component ships two variants: the default static entry uses simple React state toggling with zero JavaScript runtime cost, while the animated entry (imported from the /animated subpath) provides framer-motion enhanced reveal transitions.

Common use cases

The secret reveal component is ideal for displaying sensitive credentials in developer dashboards, password managers, API configuration panels, and payment gateway settings where visual masking is required by default.

Accessibility

The toggle button uses a dynamic aria-label attribute to communicate the current action to assistive technologies. Keyboard order, focus rings, and ARIA attributes 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 overlays into unexpected server layouts.

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

FAQ

Does the Secret Reveal component work with Next.js App Router?

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

Can I customize the secret reveal with Tailwind CSS?

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

Is the secret content secure when masked?

The masking is a client-side visual treatment — it does not encrypt the value. Use the component for UI convenience in trusted environments, not as a security boundary.