Spring Accordion

An editorial accordion — spring-driven height, answers that rise out of a blur, and an index numeral that ignites on open.

npx shadcn@latest add https://mellowui.com/r/spring-accordion.json

Playground

A copy-paste component library with an editorial point of view. Every component is self-contained — install it with the shadcn CLI, then the code is yours to edit.

Installation

▸ Run the following command

npx shadcn@latest add https://www.mellowui.com/r/spring-accordion.json

▸ Or install manually

Install dependencies: pnpm add motion
Copy the source from the Code tab above.
Place it at components/mellow/spring-accordion.tsx
Import and use.

API Reference

Prop	Type	Default	Description
items	{ title: string; content: ReactNode }[]	—	The accordion rows — a title and the panel content.
multiple	boolean	false	Allow multiple panels open at once.
defaultOpen	number[]	[]	Indices of panels open on mount.
numbered	boolean	true	Show the 01 / 02 index column.
className	string	—	Additional CSS classes.