Expandable Card
Expands into a centred panel with shared-layout transitions.
- 1.9 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/expandable-card.jsonAdds components/velora/expandable-card.tsx, installs motion.
Props
| Prop | Type | Default |
|---|---|---|
title* | string | — |
subtitle | string | — |
children*Shown only once the card is expanded | React.ReactNode | — |
mediaRendered in both the collapsed card and the expanded panel | React.ReactNode | — |
className | string | — |
Accessibility
- Reduced motion
- The card snaps straight into the centred panel with no shared-layout spring; the backdrop keeps a short opacity fade.
- Keyboard
- The card is a button that opens a modal dialog with Enter or Space. Focus moves into the dialog, Tab and Shift+Tab stay inside it, Escape or Close dismisses it, and focus returns to the card.
- Screen readers
- The card is announced as a button with aria-haspopup="dialog" and aria-expanded; the panel is a role="dialog" with aria-modal, named by its heading.