All components
Accordion Motion
LayoutAn accordion that animates panel height and chevron.
Every component, with source.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/accordion-motion.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/accordion-motion.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { title: string; content: string }[] | - | Panels to render. |
Accessibility
- Real buttons drive each panel, so keyboard toggling works.
- Height animates from 0 to auto without clipping content.
- Chevron rotation reinforces the open state visually.
Dependencies
motionclsxtailwind-mergelucide-react