BentoGrid
bento-gridArranges feature cards across configurable row and column spans with a hover action.
Usage
Basic usage
BentoGrid defines the staggered grid, and BentoCard carries the icon/title/description.
Extreme speed
Pure CSS first, zero runtime overhead
Reliable
WAI-ARIA + test coverage
Theme
OKLCH Light and dark double layer token
<BentoGrid>
<BentoCard icon={<Zap />} title="Extremely fast" description="Pure CSS first, zero runtime overhead" />
<BentoCard icon={<Shield />} title="Reliable" description="WAI-ARIA + Test Coverage" />
<BentoCard icon={<Globe />} title="Theme" description="OKLCH Double layer of light and dark token" />
</BentoGrid>Cross columns and rows
Use className (col-span / row-span) on BentoCard to control the single card occupancy and spell out the error layout.
Extreme speed
Pure CSS first, zero runtime overhead
Reliable
WAI-ARIA + test coverage
Theme
OKLCH Light and dark double layer token
Composable building blocks
Learn from everyone's strengths and unify them into one set of Hulian API
<BentoGrid>
<BentoCard className="sm:col-span-2" icon={<Zap />} title="Extreme speed" description="Pure CSS Priority" />
<BentoCard icon={<Shield />} title="Reliable" description="WAI-ARIA" />
<BentoCard icon={<Globe />} title="Theme" description="OKLCH Double Layer token" />
<BentoCard className="sm:col-span-2" icon={<Sparkles />} title="Composable building blocks" description="Unified into a set of Hulian API" />
</BentoGrid>With action area (cta)
cta is hidden by default, and hover slides up and fades in to guide secondary operations.
Get started
hover Card View Action Area
Reliable
Test Coverage
<BentoGrid>
<BentoCard
className="sm:col-span-2"
icon={<Sparkles />}
title="Get started"
description="hover Card View Action Area"
cta={<span className="text-sm font-medium text-primary">Learn more →</span>}
/>
<BentoCard icon={<Shield />} title="Reliable" description="Test coverage" />
</BentoGrid>Custom content (children)
When title/description is not used, you can directly plug in children for free typesetting.
<BentoGrid>
<BentoCard className="sm:col-span-3">
<div className="flex h-full flex-col items-center justify-center gap-2">
<Sparkles className="size-8 text-primary" />
<span className="text-base font-semibold text-foreground">Full customization</span>
</div>
</BentoCard>
</BentoGrid>When to use
Use BentoGrid for an irregular responsive wall of feature cards on a landing page. Apply span utilities such as sm:col-span-2 to individual cards. Use Table for tabular data or ProTable for an enterprise list page.
Import
import { BentoGrid, BentoCard } from "@hulianui/ui"Props
BentoGrid
Inherits HTMLAttributes<HTMLDivElement> with no custom props; control columns through className.
| Name | Type | Default | Description |
|---|---|---|---|
| ...div | HTMLAttributes\<HTMLDivElement\> | — | Forwarded props, including grid classes. |
BentoCard
Inherits Omit<HTMLAttributes<HTMLDivElement>, "title">.
| Name | Type | Default | Description |
|---|---|---|---|
| ...div | Omit\<HTMLAttributes\<HTMLDivElement\>, "title"\> | — | Forwarded props; use className for spans. |
Slots
BentoGrid
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | A group of BentoCard elements. |
BentoCard
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Card title. |
| description | ReactNode | Description. |
| icon | ReactNode | Upper-left icon or decoration. |
| cta | ReactNode | Bottom action area. |
| children | ReactNode | Custom card content. |
Example
import { Zap, Shield } from "lucide-react";
<BentoGrid className="w-full max-w-2xl">
<BentoCard className="sm:col-span-2" icon={<Zap />} title="Fast" description="CSS-first with no runtime overhead" />
<BentoCard icon={<Shield />} title="Reliable" description="WAI-ARIA and test coverage" />
</BentoGrid>Usage notes
- Spans belong in each card's
className; there is nospanprop. BentoCardredefinestitleas visible card content, not an HTML tooltip attribute.- The components are CSS-only and can render directly in a Server Component.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable