Bento Grid
Responsive bento-box layout grid with configurable column spans and gap sizes.
Preview
Bento Grid
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Feature sections and dashboard overviews.
Why this component matters
Bento grids create visual hierarchy through size variation — larger cells draw more attention.
Usage guidance
Use for 4-8 features of varying importance. Assign larger cells to primary features. Maintain consistent padding and gap sizes.
Installation
bash
npx shadcn@latest add @aceternity/bento-gridUsage
example.tsxtsx
import { BentoGrid } from "@/components/ui/bento-grid";
export default function Example() {
return (
<BentoGrid>
{/* Your content here */}
</BentoGrid>
);
}Source
bento-grid.tsx
components/ui/bento-grid.tsx