Secret field

Playground#

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

<PxSecret value="sk-demo-4f9Q7xLm2Rk8Vt3nW6pA" />

Installation#

pnpm dlx shadcn@latest add @lumesec/px-secret

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

npx shadcn@latest add https://elements.lumesec.ai/r/px-secret.json

Usage#

import { PxSecret } from "@/components/lumesec/px-secret";

export function Example() {
  return (
    <PxSecret />
  );
}

Behaviour#

The key hides under crawling pixel noise. Holding the eye wipes the noise away behind a dithered edge while each character decodes through random glyphs before it locks. Let go and it scrambles shut. The key shown is a fake.

API reference#

Attributes#

Properties#

Keyboard#

Accessibility#

• The eye button has aria-label="Hold to reveal the key" and aria-pressed reflecting whether it is held.
• The copy button has aria-label="Copy the key".
• The key container carries aria-label="API key, hidden", which changes to include the key once it is fully revealed; the container has no role.
• The hint line below is an aria-live="polite" region that reports copy success or failure.
• Reduced motion: the key reveals and hides at once and characters appear without the scramble; the noise layer still moves.

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, --card, --foreground, --lumesec and --muted-foreground.

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

Notes#

• The default value is a fake demo key. Set value before the element connects, since the displayed characters are not rebuilt later.
• Copy uses navigator.clipboard.writeText; when that is unavailable the hint asks the user to reveal and copy by hand.
• The key stays visible for 0.35 seconds after release before it scrambles shut. The label text "API key" is fixed.