Secret field

Free

A secret shown only on purpose: reveal it and the characters settle into place, and it masks itself again on a visible timer. Copying never needs it revealed.

Installs components/ui/secret-field.tsxDepends on @radix-ui/react-slot, lucide-reactMotion honours reduced motion

pnpm dlx shadcn@latest add https://caliperui.site/r/secret-field.json

Live secret key

••••••••••••••••••••••••

It hides itself again after 15 seconds.

When to use #

Use it for

API keys, webhook secrets and recovery codes.
Any value that should not sit on screen.

Skip it when

Passwords people type; use the password field.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/secret-field.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { SecretField } from "@/components/ui/secret-field"

export function SecretFieldDemo() {
  return (
    <div className="grid w-full max-w-md gap-2">
      <p className="text-sm font-medium">Live secret key</p>
      <SecretField label="live secret key" value="clp_live_8f2kQ7mZ4xN1pW6sT3vB9cL0" hideAfter={15} />
      <p className="text-xs text-muted-foreground">It hides itself again after 15 seconds.</p>
    </div>
  );
}

API reference #

SecretField

component

PropTypeDefaultDescription

label *string—What the secret is, e.g. "Live API key".

value *string—

hideAfternumber20Seconds before it masks itself again; 0 keeps it shown.

classNamestring—

Motion #

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.