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 https://grootstudio.vercel.app/r/animated-layout.json

Usage

Props

PropTypeDefaultRequiredDescription
itemsCollectionItem[]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.
headingstring'My Tasks'Section heading rendered above the tab bar.
classNamestringAdditional CSS classes applied to the root wrapper.

Dependencies

motion
lucide-react