Components/Components
Animated Layout
A layout switcher component with buttery-smooth spring-physics transitions between list, grid, and pack views.
layoutanimationmotion
Preview
Installation
npx shadcn@latest add @grootstudio/animated-layoutUsage
1
Import the component
2
Use like this
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| items | CollectionItem[] | - | Array of collection items to display. Each item requires id, title, subtitle, badge, image, and icon. | |
| defaultView | list|card|pack | list | The initial view mode on first render. | |
| heading | string | My Tasks | Section heading rendered above the tab bar. | |
| className | string | - | Additional CSS classes applied to the root wrapper. |
Dependencies
motion
lucide-react
