Browse components
Spring Check
Checkbox that squashes on press, pops and wobbles when checked, floods with color from the center and springs its tick in with a spark burst.
Installation
npx shadcn@latest add @glint-ui/spring-checkFirst 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/spring-check.json
Usage
import { SpringCheck } from "@/components/ui/spring-check";
<SpringCheck label="Ship it" checked={ready} onChange={setReady} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Ship it" | Label text (any node). |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| color | string | "#22c55e" | Fill color when checked. |
| size | number | 28 | Box size in px. |
| disabled | boolean | false | Disable the checkbox. |
| checked | ReactNode | — | Controlled state, pair with onChange. |
| onChange | ReactNode | — | (checked: boolean) => void. |
| className | string | — | Extra classes for the root element. |