Loading…

Expandable Cards

beta

Cards that open into a detail view — widening in place in a row, or growing out of a grid into a modal.

Display
1 file
2 npm packages
Accessibility notes
Animates with motion

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add expandable-cards

npm packages installed: motion, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Controlled
As Dialog

API

Generated from the component's own types, so a prop cannot appear here without existing.

<ExpandableCards>

Prop	Type	Default
`items` (required)	`ExpandableCardItem[]`	—
`cardClassName` Classes for every card.	`string`	—
`defaultValue` The open card's id at first (uncontrolled).	`string \| null`	`null`
`onValueChange`	`(value: string \| null) => void`	—
`presentation` `inline` widens the chosen card in its row (the SmoothUI original); `dialog` grows it out of a grid into a modal detail view.	`"inline" \| "dialog"`	`"inline"`
`value` The open card's id, or null (controlled).	`string \| null`	—

Plus every attribute of <div> except children, defaultValue.

Accessibility

Every card is a real button. Inline, it is a disclosure (aria-expanded, aria-controls) whose detail is a labelled region: opening moves focus into it, Escape closes it from anywhere inside the card and returns focus to the card, and a closed detail is aria-hidden and inert. As a dialog it is a Radix modal — focus trap, aria-modal, title and description, Escape and a named Close button — and focus returns to the card that opened it. Motion follows MotionConfig reducedMotion="user": under reduced motion the card still opens, without growing out of its place.