MDI 2026-ish tokens · utilities · components

Dashboard overview

This page stress-tests: grid, spacing, sizing, typography, tables, buttons, forms, badges, scrollbar, cards, accordion, switch, drawer, modal, and theme tokens.

Last 7 days
Last 30 days
This year
Custom
EU region Online Alerts 2 Updated Feb 16, 2026
Inline code token
Try: btn-gray-light btn-sm, col-lg-4, data-toggle, data-theme-toggle.
Quick actions
System
Realtime sync
Open modal / drawer
alert-teal — Success style container.
alert-red — Danger style container.
Total revenue
€ 142,500
+12% vs last month
Active users
1,204
Stable churn 1.1%
System status
Healthy API 124ms · DB 8ms
Last checked: Feb 16, 2026

Forms

input, select, input-group, focus ring

Typography & Utilities

sizes, weights, alignment, spacing helpers
h1
h2
h3
h4
h5
h6
body text — muted — light
small text
Badges
badge-teal solid warn danger
Spacing / size quick grid
w-25
w-33
w-50
w-66
w-33
Recent transactions
Small variant
Key Value Meta
Theme data-theme light / dark
Drawer .drawer is-open
Modal .modal-overlay is-active
Table edit .table-edit-btn welcome.js
Pipeline
progress bars + buttons
Qualified 18
Proposal 9
Negotiation 4
Borders / radius / elevation
border helpers + rounded + elevation
elevation-1
elevation-4
rounded-sm
rounded
rounded-lg
pill

Framework FAQ

accordion + utilities + theme tokens
Negative margins + column padding keeps gutters consistent and safe for nesting.
Yes — with your VOR event delegation, ESC closes modal first, then drawer.
Toggle data-theme on <html>. CSS vars update automatically.
Notes
quick sanity checks
badge-teal
badge-gray-light
badge-orange-light + text-orange-900
Visibility / overflow
overflow-auto box
Line 1
Line 2
Line 3
Line 4
Line 5