{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bento", "type": "registry:ui", "title": "Bento grid (MIAN)", "description": "A grid of tiles in mixed sizes for showing several product details at once.", "categories": [ "sections", "bento", "bento grid", "tiles", "mosaic" ], "registryDependencies": [ "https://mian.ro/r/mian-base.json" ], "files": [ { "path": "mian/components/bento.css", "type": "registry:file", "target": "mian/components/bento.css", "content": ".mn-bento { display: grid; gap: var(--mn-gap, 1rem); grid-template-columns: minmax(0, 1fr); grid-auto-flow: dense; }\n.mn-tile { --_p: clamp(1.25rem, 2.6cqi, 1.9rem); display: flex; flex-direction: column; gap: .55rem; min-width: 0; padding: var(--_p); }\n.mn-tile > * { margin: 0; }\n.mn-tile-title { font: var(--mn-heading-weight) 1.125rem/1.3 var(--mn-font-heading); letter-spacing: -.012em; color: var(--mn-fg); }\n.mn-tile :where(p:not([class])) { color: var(--mn-muted); font-size: .9375rem; line-height: 1.6; }\n.mn-tile-media { margin: auto calc(var(--_p) * -1) calc(var(--_p) * -1); padding: var(--_p) var(--_p) 0; min-width: 0; }\n.mn-tile-media-flush { padding: 0; }\n@container mn (min-width: 40rem) {\n .mn-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .mn-tile-wide, .mn-tile-full { grid-column: span 2; }\n}\n@container mn (min-width: 62rem) {\n .mn-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }\n .mn-tile { grid-column: span 2; }\n .mn-tile-half { grid-column: span 3; }\n .mn-tile-wide { grid-column: span 4; }\n .mn-tile-full { grid-column: span 6; }\n .mn-tile-tall { grid-row: span 2; }\n}\n.mn-tile-figure { font: 700 clamp(2.25rem, 7cqi, 3.5rem)/1 var(--mn-font-heading); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--mn-fg); }\n.mn-tile-quote { margin: 0; font: 500 1.1875rem/1.45 var(--mn-font-heading); letter-spacing: -.01em; color: var(--mn-fg); text-wrap: pretty; }\n.mn-tile-end { margin-top: auto; }\na.mn-tile { position: relative; color: inherit; text-decoration: none; transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease); }\na.mn-tile:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 35%); }\na.mn-tile:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 2px; }\n.mn-tile-arrow { position: absolute; top: var(--_p); inset-inline-end: var(--_p); width: 1.1rem; height: 1.1rem; color: var(--mn-muted); rotate: -45deg; transition: translate var(--mn-dur, 200ms) var(--mn-ease-out, ease-out), color var(--mn-duration) var(--mn-ease); }\na.mn-tile:hover .mn-tile-arrow { translate: 2px -2px; color: currentColor; }\n.mn-bento-rows { grid-auto-rows: minmax(9.5rem, auto); }\n@container mn (min-width: 40rem) { .mn-bento-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }\n@container mn (min-width: 62rem) {\n .mn-bento-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n .mn-bento-compact > .mn-tile { grid-column: span 1; }\n .mn-bento-compact > :is(.mn-tile-half, .mn-tile-wide) { grid-column: span 2; }\n .mn-bento-compact > .mn-tile-full { grid-column: span 4; }" }, { "path": "mian/examples/bento.html", "type": "registry:file", "target": "mian/examples/bento.html", "content": "\n
\n
\n

Close dashboard

Every account, every entity, one progress bar.

\n
Matched
1,284
Exceptions
7
Days to close
3.5
\n
\n

Approvals on the go

Swipe to approve from your phone.

\n

32 currencies

Revalued at month-end.

\n

SOC 2 Type II

Audited every year.

\n
\n
\n\n\n
\n
\n

3.5 days

to close the month

Down from eleven, measured across 140 finance teams in 2026.

\n

Start with one entity

Connect a bank feed and reconcile last month. It takes an afternoon.

Book a walkthrough
\n
“We stopped exporting to spreadsheets in the second week. Nobody asked for them back.”
Example quote. Replace with a real, attributed one.
\n

Changelog

What shipped this month.

\n
\n
\n\n\n
\n
\n

Noor Haddad

Type designer in Rotterdam. I draw text faces for long reading and teach on Thursdays.

Booking for 2027
\n

Typefaces

Seven families.

\n

Writing

Notes on spacing.

\n

12

years drawing letters

\n
\n

Say hello

Replies within two days.

\n
\n
" } ], "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/bento", "meta": { "mian": { "license": "LicenseRef-MIAN-1.0", "requiresJs": false, "classes": [ "mn-bento", "mn-tile", "mn-tile-half · mn-tile-wide · mn-tile-full", "mn-tile-tall", "mn-tile-title", "mn-tile-media", "mn-tile-figure", "mn-tile-quote", "mn-tile-fill", "mn-tile-end", "mn-tile-arrow", "mn-bento-compact", "mn-bento-rows" ], "accessibility": [ "Tiles read in source order: put them in the order you want them read, and let the grid place them.", "Keep one idea per tile with a real heading.", "Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview." ], "intents": [ "showcase product features", "show product capabilities", "portfolio highlights", "mixed size tiles", "product tour", "feature overview with visuals" ] } } }