Shared Menu
A flexible component that displays items in multiple layouts — list, card, and compact views with smooth animated transitions between them.
Preview
Anime Collection
Visuals and characters
Rick Ross
American rapper
Installation
npm install motion lucide-reactAPI Reference
SharedMenu
| Prop | Type | Default | Description |
|---|---|---|---|
items | any[] | [] | The list of items to display |
children | (item: any, index: number, viewType: ViewType) => ReactNode | — | Render function for each item |
initialView | "list" | "card" | "compact" | "list" | The initial view mode |
onViewChange | (view: ViewType) => void | — | Callback when view changes |
className | string | — | Additional CSS classes |
Sub-components
- SharedMenuItem: Base wrapper for an item (handles layoutId and provides context)
- SharedMenuImage: Animated wrapper for images (shared across views)
- SharedMenuContent: Animated wrapper for text content
- SharedMenuNumber: Animated wrapper for labels or numbers
Features
- Multiple View Types — Switch between List, Card, and Compact layouts
- Smooth Animations — Items animate from position to position during view transitions with shared layout IDs
- Responsive Design — Adapts to different screen sizes
- Clean Transitions — No flickering, smooth height and position animations