# Motion Expandable Card

Grid card that expands in place to show its details.

- id: `motion-expandable-card`
- Page: https://agentic-ui-kit.com/components/motion-expandable-card
- Live preview: https://agentic-ui-kit.com/live/component/motion-expandable-card?piece=motion-expandable-card

## Install

```bash
agentic-ui add motion-expandable-card
npx shadcn@4.17.0 add @agentic-ui/motion-expandable-card
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** card-grid, expand-in-place, spans-the-grid, siblings-reflow, layout-and-layoutid, disclosure-pattern, focus-to-close-and-back, escape-closes, controlled-and-uncontrolled, custom-items, reduced-motion-fallback
- **Intents:** explore-detail, manage-collection
- **Suits domains:** saas, knowledge, project-management, ecommerce, media
- **Interaction:** click, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** grid card that expands in place to show its details, grid of cards that expand to show details with animation, expandable card grid where one card grows to fill the row, expandable cards with a smooth layout animation, click a card and it grows to fill the row while the others move aside, accordion style card grid with shared layout animation
- **Avoid when:** The detail should open in an overlay with a backdrop (use motion-morphing-dialog), The detail is a separate page or route (use motion-hero-to-detail), Many cards with long detail, where reflowing the grid is disorienting, Cards that are plain links with no detail
- **Preserve when adapting:** disclosure-semantics, focus-to-close-and-back, escape-closes, spans-whole-grid, instant-fallback
- **Replace when adapting:** items, media, detail, expanded-id, grid-columns, card-surface
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, motion, react
- **Motion:** profile subtle, library motion, reduced-motion fallback yes, target 60 fps
- **npm dependencies (registry):** motion@12.23.24
- **Registry dependencies:** lib-motion