127 Components
Expandable Bento Card
CardsInteractive bento surface that expands inline with Hooke's Law spring height projection to reveal secondary diagnostic modules.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/expandable-bento-card.json"
Props
TypeScript props supported by <ExpandableBentoCard />.
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | string | "RUNTIME_TELEMETRY" | Eyebrow badge label displayed above the card heading. |
| title | string | "GPU Compositor Pipeline" | Primary heading text of the bento card. |
| defaultExpanded | boolean | false | Whether the diagnostic drawer is expanded on initial mount. |
| stiffness | number | 320 | Spring stiffness coefficient for height expansion. |
| damping | number | 26 | Spring damping coefficient controlling expansion settle. |
| summary | string | — | Short summary text displayed when the card is collapsed |
Key Features
- Smooth inline height and layout projection powered by Framer Motion layout and AnimatePresence.
- Rotational spring chevron indicator synchronized with expansion state.
- Zero layout shift on neighboring grid cells when paired with layout-aware containers.
Keyboard & Accessibility
- Header trigger is a semantic button with aria-expanded state announcement.
- Supports Enter and Space keys to toggle expansion.
- Collapses transition duration when prefers-reduced-motion is enabled.