Layout
Bento Grid
Responsive bento-style grid of glass cards with icon, title and description.
A responsive bento-style grid. BentoGrid lays out a one-column (mobile) / three-column (desktop) grid, and each BentoCard is a glass tile with a header media slot, an icon, a title, and a description. Make a tile span multiple columns or rows with Tailwind classes via className.
Import
import { BentoGrid, BentoCard } from "@yuhuanowo/yunui";
Basic
Bento layout
Polished
Glassy tiles with a subtle hover shift.
Fast
Pure CSS layout, no runtime cost.
Resilient
Responsive from one to three columns.
Spanning tiles
Use className on a BentoCard to make it span multiple columns, and supply a header for a media area above the text.
Featured tile
Featured
This tile spans two columns and has a header visual.
Compact
A standard single-column tile.
Props — BentoGrid
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — |
Props — BentoCard
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| description | ReactNode | — | Card body text. |
| header | ReactNode | — | Top media/visual slot above the icon and text. |
| icon | ReactNode | — | Icon shown above the title. |
| title | ReactNode | — | Card title. |