Bento Grid
betaTiles of different sizes in one tidy grid — the layout behind a feature section or a dashboard overview — single-column on small screens.
- Layout
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add bento-gridnpm packages installed: class-variance-authority.
import { BentoGrid } from "@/components/ui/bento-grid";<BentoGrid>
| Prop | Type | Default |
|---|---|---|
dense | boolean | — |
gapSpace between tiles, in pixels. Default 16. | number | 16 |
rowHeightHeight of one row, in pixels; tiles grow past it when their content needs to. Default 180. | number | 180 |
Plus every attribute of <div>.
<BentoItem>
Plus every attribute of <div>.
A plain grid: tiles stay in document order, so reading order, tab order and visual order agree. On small screens every tile is full width and as tall as its content. `dense` lets small tiles fill gaps and can therefore move them visually away from their place in the reading order — leave it off when order matters. Give each tile a heading so the grid can be navigated by headings.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes