The ExpandableCard component grows any row of a list into a detail panel in place, sharing a layout id between the two so the card the reader pressed is visibly the card that opens rather than one fading out as a dialog fades in.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/expandable-card.jsonEverything Expandable Card accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| items (required) | ExpandableCardItem[] | No default | The rows to render, in order |
| duration | number | 0.35 | Seconds the expand and collapse take |
| className | string | '' | Additional CSS classes applied to the list wrapper |
| ExpandableCardItem: id | string | No default | Unique key, and the namespace for the shared layout ids |
| ExpandableCardItem: title | string | No default | Row heading, carried into the open panel |
| ExpandableCardItem: meta | string | No default | Small line above the title — a date, a category, a status |
| ExpandableCardItem: summary | string | No default | The one line shown while the card is collapsed |
| ExpandableCardItem: detail | string | No default | The body revealed once it is open |
Required.