Browse components
Toggle Vault
A lock switch styled as a vault door: the combination dial winds back, spins, and the bolts retract; locking spins it home and slams the bolts shut.
Installation
npx shadcn@latest add @glint-ui/toggle-vaultFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/toggle-vault.json
Usage
import { ToggleVault } from "@/components/ui/toggle-vault";
<ToggleVault locked={locked} onChange={setLocked} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 160 | Diameter in px. |
| defaultLocked | boolean | true | Start locked (uncontrolled). |
| label | string | "Vault" | Accessible name, announced as "<label> lock". |
| openColor | string | "#22c55e" | Indicator color when unlocked. |
| lockedColor | string | "#ef4444" | Indicator color when locked. |
| locked | ReactNode | — | Controlled state. Pair with onChange(locked). |
| className | string | — | Extra classes for the root element. |