ns-ui

Grid Bento Dense

A composable bento grid where activating a tile genuinely promotes it: the tile takes a 2x2 slot and every other tile re-packs around it via CSS grid-auto-flow: dense, FLIP-animated so the reflow reads as tiles sliding into new slots rather than jumping.

Use when A dashboard or overview grid where one tile should be able to earn the large slot — the caller passes arbitrary cells (any count, any content) and lets whoever's looking at it decide which one matters right now, rather than a designer fixing that in a template. Reach for grid-magnetic-lattice instead when the point is ambient cursor-reactive motion over a fixed card layout, not an actual change of which tile is largest.

Install

npx shadcn add https://design.helpmarq.com/r/grid-bento-dense.json
  • grid
  • layout
  • bento
  • dashboard
  • keyboard-navigation
  • reflow
  • accessibility

ns-ui / grid-bento-dense

reliability

API Uptime

99.982% rolling 30 days

performance

P95 Latency

142ms — down 8ms week over week

status

Open Incidents

0 active, 2 resolved this week

team

On Call

  • Primary — Reyes
  • Secondary — Okoye
  • Escalation — Lindqvist

velocity

Deploys

14 this week across 6 services

infra

Monthly Spend

$4,210 — 3% under budget

quality

Error Rate

0.04% of requests

click or Enter/Space any tile to feature it — the rest of the grid re-packs around it, and arrow keys move by screen position, not markup order

Props

PropTypeDefaultDescription
cellsBentoCell[]——
cols?number——
defaultFeaturedId?string——
className?string——
Back to the catalog