{ "$schema": "https://mian.ro/schema/v2/registry.json", "schemaVersion": "2.0.0", "generatedAt": "2026-10-02T13:14:06.957Z", "id": "dashboard", "name": "Dashboard grid", "category": "Layout & utilities", "description": "A twelve-track grid for dashboards and a widget frame: title, period, body, footer. It lays out for the width it gets, so it works beside a sidebar.", "tags": [ "dashboard", "dashboard layout", "widget", "panel", "admin layout", "analytics page", "grid", "overview page" ], "requiresJs": false, "license": "LicenseRef-MIAN-1.0", "composition": { "role": null, "intents": [ "dashboard layout", "dashboard grid", "widget panel", "admin overview page", "analytics overview" ], "prominence": null, "density": null, "worksAfter": [], "worksBefore": [], "alternatives": [ "app-shell", "bento" ], "avoid": null }, "url": "https://mian.ro/components/dashboard", "markdownUrl": "https://mian.ro/ai/components/dashboard.md", "classes": [ { "name": "mn-dash", "description": "The grid: one column, then halves, then twelve tracks." }, { "name": "mn-dash-3 · -4 · -5 · -6 · -7 · -8 · -9", "description": "How many of twelve tracks a child spans on wide containers. Without one, a child spans the full row." }, { "name": "mn-widget", "description": "A panel. Add mn-card for the surface." }, { "name": "mn-widget-head", "description": "Title on the left, a control (period, menu) on the right." }, { "name": "mn-widget-title · mn-widget-sub", "description": "Heading and one line under it." }, { "name": "mn-widget-body", "description": "Content. mn-widget-flush on the widget removes the side padding (tables, lists)." }, { "name": "mn-widget-foot", "description": "A footer line: a link to the full report, or when the data was updated." } ], "accessibility": [ "Each widget is a
with a real heading, so it appears in the page outline.", "Order widgets in the source by importance; the grid only changes how wide they are.", "Say when the data was last updated, in text." ], "examples": [ { "title": "Overview", "description": null, "html": "
\n

Orders

Last 12 weeks

\n
\n
Updated 4 minutes agoFull report
\n

Fulfilment

\n
86%

shipped within 24 hours · target 90%

\n

Needs attention

3
\n
OrderIssueAge
#48213Address not found2 d
#48190Payment review1 d
#48177Out of stock: 1 item6 h
\n

Sales by channel

\n
\n
  • Own shop€26,03054%
  • Marketplace€13,02027%
  • Wholesale€6,27013%
  • Other€2,8906%
\n
" } ], "css": ".mn-dash { container: mn-dash / inline-size; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--mn-gap, 1rem); }\n.mn-dash > * { grid-column: span 12; min-width: 0; }\n@container mn-dash (min-width: 38rem) {\n .mn-dash > :is(.mn-dash-3, .mn-dash-4, .mn-dash-6) { grid-column: span 6; }\n}\n@container mn-dash (min-width: 62rem) {\n .mn-dash > .mn-dash-3 { grid-column: span 3; }\n .mn-dash > .mn-dash-4 { grid-column: span 4; }\n .mn-dash > .mn-dash-5 { grid-column: span 5; }\n .mn-dash > .mn-dash-7 { grid-column: span 7; }\n .mn-dash > .mn-dash-8 { grid-column: span 8; }\n .mn-dash > .mn-dash-9 { grid-column: span 9; }\n}\n.mn-widget { display: flex; flex-direction: column; min-width: 0; }\n.mn-widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .95rem 1.15rem .2rem; }\n.mn-widget-title { margin: 0; font: 600 .9375rem/1.35 var(--mn-font); color: var(--mn-fg); }\n.mn-widget-sub { margin: .1rem 0 0; color: var(--mn-muted); font-size: .8125rem; }\n.mn-widget-body { flex: 1; min-width: 0; padding: .8rem 1.15rem 1.15rem; }\n.mn-widget-flush > .mn-widget-body { padding: .5rem 0 0; }\n.mn-widget-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1.15rem; border-top: var(--mn-border-w) solid var(--mn-border); color: var(--mn-muted); font-size: var(--mn-text-sm); }", "js": null, "install": { "css": "https://mian.ro/dist/mian.css", "js": null, "registryItem": "https://mian.ro/r/dashboard.json" } }