DocumentationExpandable Bento Grid

Expandable Bento Grid

An interactive bento-style grid with expandable cards that reveal details on click.

    Lightning Fast

    Optimized for speed

    Beautiful Design

    Modern aesthetics

    Built with Love

    Quality first

    Animations

    Smooth & fluid

    Global Ready

    Works everywhere

    Launch Ready

    Production grade

Install using CLI

npx shadcn@latest add "https://obsidianui.dev/r/expandable-bento-grid.json"

Install Manually

1

Install dependencies

npm install framer-motion lucide-react clsx tailwind-merge
2

Copy the source code

Copy into components/ui/expandable-bento-grid.tsx

Props

Prop NameTypeDefaultDescription
items{ id, title, subtitle?, description?, content, icon?, className? }[]-Array of grid items