Skip to content

Now in the official shadcn registry directory.

Start free
All blocks
Bento grids

Four ideas that hold the same page.

Asymmetric grids where every tile earns its space. The scenes are built from real components with real state, and a WebGL wash sits under each card reading your brand token, so a preset change repaints the whole grid.

Blocks
12
Presets
8
Breakpoints
3
Licence
Pro

Docs bento

The same split as the campaign bento read the other way: visual on top, caption centred underneath. An editor whose preview follows the selected line, and a change feed that advances on its own.

Unlock codeI have a key
npx install unlocks with a licence

Release bento

A narrow two column stack: two short cards, then two full width ones. A property panel where the list and the control read the same state, and variable tiles that lift under the pointer.

Unlock codeI have a key
npx install unlocks with a licence

Roadmap bento

Nine cards in a dense mosaic with a full width strip underneath. Every card carries a status badge, and the strip holds a real selection.

Unlock codeI have a key
npx install unlocks with a licence

Report bento

A wide hero split in two beside a pair of tall cards, each opening with an eyebrow chip. The switch really turns the automatic grouping off, and the quote list keeps what you pick.

Unlock codeI have a key
npx install unlocks with a licence

Library bento

Four equal cards, each with a layered figure over a centred caption. The calm end of the family: one rhythm, repeated four times.

Unlock codeI have a key
npx install unlocks with a licence

Campaign bento

Two cards over three, every visual cut off by the card it sits in. Offer chips that reorder the stack behind them, a real copy button, and a channel grid that keeps one choice.

Unlock codeI have a key
npx install unlocks with a licence

Ledger bento

Six cards, one anatomy: icon, rule, two lines, and a visual the card cuts off. The quiet member of the family, where the character comes from repetition instead of layout.

Unlock codeI have a key
npx install unlocks with a licence

Orbit bento

Two mirrored rows: the narrow card changes side. A real orbit where the marks stay upright, three panels that come forward when you point at them, a prompt queue that advances, and three destinations inside a cloud.

Unlock codeI have a key
npx install unlocks with a licence

Console bento

An uneven grid: seven cards across three rows, none of them the same width. A quick access list, a field of actions the highlight travels across, a switch someone is already holding, and a member list whose actions stay closed until you pick a row.

Unlock codeI have a key
npx install unlocks with a licence

Source bento

One full height column beside two short tiles. A folder tree that remembers what is open, a series you can drag along, and a tile wall that runs past the edge. Brand marks come from simple-icons and are drawn in a single colour, so a preset change carries them too.

Unlock codeI have a key
npx install unlocks with a licence

Refine bento

A six column rhythm: one wide hero, one full height column, two short tiles. Every control carries state, so the running count, the sort order and the row rhythm are computed rather than drawn.

Unlock codeI have a key
npx install unlocks with a licence

Capability bento

Four cards, two rhythms: the tall pair lead with words and answer with a diagram, the short pair open with the visual. Every light layer is derived from the brand token, so a preset change repaints the whole grid.

Unlock codeI have a key
npx install unlocks with a licence