Browse components
Code Slots
A one-time code input where each digit spins in like a slot reel, shakes on a wrong code and glows on success.
Installation
npx shadcn@latest add @glint-ui/code-slotsFirst 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/code-slots.json
Usage
import { CodeSlots } from "@/components/ui/code-slots";
<CodeSlots
length={6}
onComplete={async (code) => (await verify(code)).ok}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Number of digits. |
| successColor | string | "#22c55e" | Glow color on success. |
| errorColor | string | "#ef4444" | Border color on a wrong code. |
| label | string | "Verification code" | Accessible label of the input. |
| onComplete | ReactNode | — | (code) => boolean | Promise<boolean>. true glows, false shakes and clears. |
| onChange | ReactNode | — | Called with the digits typed so far. |
| className | string | — | Extra classes for the root element. |