An image-first card that grows into a dialog with the rest of its story, then returns to its place.
pnpm dlx shadcn@latest add @latheui/expanding-cardPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Expanding Card is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| image* (required) | { src: string; alt: string } | — | Shown on the card and at the top of the dialog. |
| title* (required) | string | — | Card heading, and the dialog's title. |
| eyebrow | ReactNode | — | Small label above the title. |
| subtitle | ReactNode | — | Line under the title. |
| children* (required) | ReactNode | — | Content shown only when expanded. |
| open | boolean | — | Controlled open state. |
| defaultOpen | boolean | false | Initial state when uncontrolled. |
| onOpenChange | (open: boolean) => void | — | Called when it opens or closes. |
| className | string | — | Classes for the card. |
| panelClassName | string | — | Classes for the expanded panel. |
<ExpandingCard image={image} title="Case study" panelClassName="max-w-2xl" className="max-w-sm">
{story}
</ExpandingCard>