Expandable Cards

A list of cards where the one you pick morphs into a detail view with a shared-layout spring, closing on Escape or backdrop click.

Open

radius20

bounce0.15

backdrop

Installation

npx shadcn@latest add @glint-ui/expandable-cards

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/expandable-cards.json

Usage

import { ExpandableCards } from "@/components/ui/expandable-cards";

<ExpandableCards
  items={[
    { id: "tides", title: "Tides", subtitle: "38 min listen", image: "/tides.jpg", content: <p>…</p>, cta: "Play" },
  ]}
/>

Props

Prop	Type	Default	Description
items	ReactNode	—	Array of { id, title, subtitle, image, content, cta?, onCta? }.
radius	number	20	Corner radius in px.
bounce	number	0.15	Spring bounce of the morph.
backdrop	boolean	true	Dim and blur the list behind the open card.
className	string	—	Extra classes for the root element.