Bento Grid

A responsive bento grid for feature sections: tiles with icon, title, copy and a visual slot on a six column grid that collapses to one column on phones.

src/registry/ui/bento-grid.tsx/r/bento-grid.json

Installation#

bash
npx shadcn@latest add https://ui.minidev.pro/r/bento-grid.json

Usage#

tsx
import { BentoGrid } from "@/components/ui/bento-grid"

export function Example() {
  return <BentoGrid />
}

API reference#

BentoGrid props
PropTypeDefault
itemsBentoItem[]DEMO
classNamestring-

Dependencies#

npm

lucide-react

Built from

No other MiniDev files
All Landing page sections for React and Tailwind