Secret field · Pixel HD component

<hf-reveal>· loading

Tryclick into the field.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-reveal>

Props

secretremounts

hintremounts

<HfReveal
  secret="sk-ant-api03-Px9Qz7R4mW2vL8kT5nB1cJ6hD3fY0sA"
  hint="Hidden"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-reveal

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-reveal.json

Usage

import { HfReveal } from "@/components/lumesec/hf-reveal";

export function Example() {
  return (
    <HfReveal secret="sk-ant-api03-Px9Qz7R4mW2vL8kT5nB1cJ6hD3fY0sA" hint="Hidden" />
  );
}

Behaviour

The value sits under live static. Revealing dissolves the noise outward from where you clicked; it hides itself again after fifteen seconds, and Copy flashes green.

API reference

Attributes

secretReact propsecretTypestringDefaultsk-ant-api03-Px9Qz7R4mW2vL8kT5nB1cJ6hD3fY0sA

Value to hide, reveal and copy. The default is a demo key. The displayed text is set once on connect; copying and announcements read the attribute each time.

hintReact prophintTypestringDefaultHidden

Text beside the API key label while the secret is hidden.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

toggleReact proponToggleDetail{ revealed: boolean }

Fires on every reveal or hide, including the automatic hide after 15 s.

copyReact proponCopyDetail{ ok: boolean }

Fires after the Copy button or copy() is used. ok is false when the clipboard write was rejected.

Methods

Call them on the element, for example through a React ref.

toggle(x?: number)

Reveals or hides the secret. x is the horizontal origin of the dissolve in pixels from the left of the value.

copy(): Promise<void>

Writes the secret to the clipboard and shows Copied, or Failed when the write is rejected.

Properties

secret (read-only)Typestring

The secret value.

Accessibility

The secret is monospace text under a noise canvas. It is aria-hidden while hidden and readable by screen readers while shown.
The Reveal button's aria-label follows its text: Reveal secret or Hide secret.
A visually hidden aria-live="polite" region announces Secret shown, Secret hidden, Copied to clipboard and Copy failed; it never reads the secret.
Clicking the value area also toggles it; that area is not focusable.
Reduced motion: the static is frozen, revealing and hiding happen at once without the dissolve, and copying shows no green flash; the Copy label swaps without rolling.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --border, --foreground, --lumesec, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-fg, --ui-font, --ui-mono, --ui-muted and --ui-raised.

Notes

The secret is plain text in the shadow DOM and is only masked visually; scripts on the page can read it.
The API key label text is fixed.
When the clipboard write fails, for example outside a secure context, the button shows Failed instead of Copied and there is no green flash; copy still fires, with ok: false.

<hf-card>

Media cardhf-card

<hf-hero>

Herohf-hero

<hf-marquee>

Logo marqueehf-marquee

<hf-dialog>

Dialoghf-dialog

Related