Browse components
Bento Grid
Responsive bento layout of feature tiles with hover lifts, playful icons and a cursor spotlight that glows across tile borders.
Installation
npx shadcn@latest add @glint-ui/bento-gridFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/bento-grid.json
Usage
import { BentoGrid } from "@/components/ui/bento-grid";
<BentoGrid>
<BentoCard className="md:col-span-2" icon={<Search />} title="Instant search" description="Find anything fast." visual={<Preview />} href="/search" />
<BentoCard icon={<ChartColumn />} title="Analytics" description="Live metrics." />
</BentoGrid>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | BentoCard elements ({ title, description, icon, visual?, href?, cta?, className }). |
| columns | number | 3 | Columns on wide screens. |
| rowHeight | number | 176 | Row height in px. |
| gap | number | 12 | Gap between tiles in px. |
| spotlight | boolean | true | Cursor glow across tile borders. |
| spotlightColor | string | "#a3e635" | Spotlight color. |
| className | string | — | Extra classes for the root element. |