Expanding Panels
An editorial menu of numbered columns — hover one and it blooms into a full-height accent panel with its content, while the others compress into slim rails with vertical titles.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/expanding-panels.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/expanding-panels.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ExpandingPanelItem[] | — | Columns — title, optional subtitle, accent, content, cta. |
| defaultActive | number | null | null | Panel open on mount; null = all columns rest equal. |
| height | number | 420 | Row height in px. |
| grow | number | 3.4 | Flex-grow of the open panel relative to the rails. |
| stiffness | number | 220 | Bloom spring stiffness. |
| damping | number | 30 | Bloom spring damping. |
| onActiveChange | (index: number | null) => void | — | Called when the open panel changes. |
| onCta | (index: number) => void | — | Called when a panel CTA is pressed. |
| className | string | — | Additional CSS classes. |