Shadcn Bento Block Nine

Bento block nine is a disciplined six-cell grid. It trades asymmetric card spans for a bordered matrix where every feature gets equal weight.

The variant imports fingerprint, chart, memory usage, uptime, poll, and message illustrations. The copy covers identity verification, analytics, resource monitoring, service reliability, user feedback, and a communication hub.

What makes this variant useful

This block is useful when you want a bento feel without uneven card sizing. It uses one bordered wrapper with divided cells, hover backgrounds, and responsive border logic. The section feels more like a product capability matrix than a pile of cards.

Equal weight is the advantage. No one feature dominates the story, so the reader can compare capabilities quickly.

Best fit

Use this variant for products with six clear modules: security, analytics, monitoring, uptime, surveys, messaging, automation, billing, or support. It is especially good for platform overview pages and comparison-adjacent pages.

Implementation details

The wrapper defines border color using color-mix, sets a shared card background token, and applies grid and padding styles to every child with *:grid, *:grid-rows-[1fr_auto], and *:p-8.

The code also includes breakpoint-specific border rules so the divided grid stays clean across two-column and three-column layouts.

What to customize first

• Keep all six cells similar in copy length.
• Use this layout only when features are roughly equal in importance.
• Replace the illustrations with icons or product states from the same visual family.
• Avoid adding a seventh item unless you redesign the grid.

Frequently asked questions

Does Bento Block Nine support dark mode?

Yes. It uses foreground, muted foreground, background, card, and border tokens that adapt with the theme.

Is Bento Block Nine responsive?

Yes. It moves from a single column to two columns and then three columns, with border rules adjusted per breakpoint.

Can I customize the hover state?

Yes. The hover treatment is controlled by *:hover:bg-foreground/2 on the grid wrapper.

When should I use this over an asymmetric bento?

Use it when all features deserve equal visual weight.

Start from Tailark

Preview Bento Block Nine