Bento Grid

A responsive bento layout that collapses to a single column on mobile, with per-card column and row spans and a hover glow that scales from the corner.

Blocks

layoutgridbentoresponsive

Search everything

Every component and resource in one command palette.

Instant themes

Dark and light, driven by CSS variables.

Copy the source

No package to install.

Credit the maker

Every entry links back to whoever built it.

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { BentoGrid, BentoCard } from "@/registry/components/bento-grid";

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

Install prerequisites

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

More in Blocks

Timeline

A vertical timeline with a brand dot per milestone and a left rule — enough structure for changelogs, roadmaps and onboarding steps.