Expandable card
Give a dense card more room when requested.
pnpm dlx shadcn@latest add @uiarc/expandable-cardLive · keyboard ready
- A single summary card with optional details, like a plan, order, or log entry.
- Cards whose summary line updates and should roll changed words in place.
- Use accordion for a list of mutually exclusive sections.
- Use card when there is nothing to reveal.
- Use card-stack for browsing several cards in one spot.
Installation
Add Expandable card with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/expandable-cardAdds the component and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { ExpandableCard } from "@/registry/components/expandable-card/expandable-card"; export function PlanDetails() { return ( <ExpandableCard title="Pro plan" description="Billed yearly, renews March 4" width={400} expandedWidth={600}> <ul> <li>Unlimited projects</li> <li>Priority support</li> </ul> </ExpandableCard> );}ExpandableCard
A card whose header toggles a details panel beneath it.
PropTypeDefaultDescription
titleRequiredstring–Card heading, shown in the toggle.descriptionstring–Summary line. Changed words roll in when it updates.childrenRequiredReactNode–Details revealed when expanded.defaultExpandedbooleanfalseStarts expanded.widthnumber–Collapsed width cap in px. The card is centered and never wider than its container. Fills the container when omitted.expandedWidthnumber–Expanded width cap in px, so the card grows sideways into more room when opened. Defaults to width.- EnterorSpace
- Toggles the card from its header button.
- Escape
- Closes the card while focus is inside it and returns focus to the header.
- The header is a native button with aria-expanded and aria-controls pointing at the panel.
- The rolling description keeps a screen-reader-only copy of the full text; animated words are aria-hidden.
- The collapsed panel is inert, so its content is not reachable by keyboard or screen readers while closed.
- Open and close are one morph: width and height move together on the smooth spring, which never overshoots, and the arrow turns on the same spring.
- Details fade in once the box has made room and fade out before it shrinks. They are laid out at their open width throughout, so text never reflows or stretches.
- Clicking again mid-animation reverses from the current size with its velocity. Changed words in the description rise in; unchanged words hold still.
- Reduced motion applies end states instantly and swaps the description without animation.
- Without width caps the card fills its container. With width and expandedWidth it stays centered and grows sideways to the open cap, never wider than its container, so on a phone it simply uses the full width.
- The whole header is the toggle with a 64px minimum height, so it is an easy touch target.
- The panel stays mounted but inert at zero height when collapsed, so a second click mid-animation reverses smoothly.
- Width and height are animated for real on one spring rather than scaled, so text and corners never stretch; keep the details short.
- The description splits into one span per word for the roll; keep it to a short line.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a single standalone expandable summary such as a plan, order, or log entry. Use accordion for a list of mutually exclusive sections.
- State is internal; there is no controlled prop.
The full library index for assistants is at /llms.txt.