Expandable Card

Expandable Card is a reusable interactive card component for showing a compact preview first, then expanding to reveal more details, supporting descriptions, actions, and optional learn-more links.

interactivemotionanimationcardaccessibility

Smart Automation

Automate repetitive tasks and help users move faster with fewer manual steps.

View docs

Real-time Insights

Show important data clearly so users can understand activity, growth, and performance.

Learn more

Custom Interface Design

Create polished, responsive, and reusable interfaces for websites and products.

Learn more

Installation

$npx shadcn@latest add https://ui.navdeepsingh.dev/r/expandable-card.json

API Reference

Prop	Type	Default	Description
`title`	`string`	`-`	Card title, shown in both the collapsed and expanded states.
`description`	`string`	`-`	Short summary shown in the preview and again when expanded.
`image`	`string`	`-`	Optional cover image URL shown in the media area.
`icon`	`React.ReactNode`	`-`	Optional icon/media node, used in the media area when no `image` is set.
`items`	`ExpandableCardItem[]`	`[]`	Detail rows revealed in the expanded state. Each item is { title, description }.
`footer`	`React.ReactNode`	`-`	Custom footer/actions rendered in the expanded state.
`learnMore`	`{ label?: string; href?: string; onClick?: () => void }`	`-`	Optional learn-more link (when `href`) or action (when `onClick`) rendered in the expanded state.
`open`	`boolean`	`-`	Controlled open state. Use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	`-`	Called whenever the open state changes (controlled or uncontrolled).
`className`	`string`	`-`	Classes merged onto the collapsed card.

Customization

Pass className to restyle the component. Classes are merged with cn, so your utilities win.
Styling uses Tailwind utility classes and theme tokens, so it adapts to light/dark mode automatically.
Tune behavior with the props in the API reference above, for example title.