BentoGrid

A CSS grid layout with flexible spanning cards. Perfect for feature showcases, dashboards, and marketing pages that need an asymmetric, magazine-style layout.

import { BentoGrid, BentoCard } from "@animui/ui"

Basic

A 3-column grid with five cards. The first card spans two columns using colSpan=2.

📊

Analytics

Track metrics in real time.

🔒

Security

Enterprise-grade security.

🔗

Integrations

Connect 100+ tools.

🔔

Notifications

Smart contextual alerts.

🤝

Collaboration

Work together seamlessly.

BentoGrid Props

Prop	Type	Default	Description
`cols`	`2 \| 3 \| 4`	`3`	Number of grid columns.
`className`	`string`	—	Additional classes.

BentoCard Props

Prop	Type	Default	Description
`title`	`string`	—	Card headline.
`description`	`string`	—	Supporting text below the title.
`icon`	`ReactNode`	—	Icon or decorative element.
`header`	`ReactNode`	—	Full-width content above title (image, chart, etc.).
`colSpan`	`1 \| 2 \| 3`	`1`	Number of grid columns to span.
`rowSpan`	`1 \| 2`	`1`	Number of grid rows to span.
`gradient`	`string`	—	CSS gradient for card background.
`className`	`string`	—	Additional classes.