All components
Animated Check
FeedbackA circle and checkmark that draw themselves in.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/animated-check.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/animated-check.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 64 | Width and height in pixels. |
Accessibility
- Decorative by default - pair it with text confirming what succeeded.
- Uses pathLength, so it scales cleanly at any size.
- Colour is inherited, so it can be themed by the parent.
Dependencies
motionclsxtailwind-merge