Components · 02
UI elements
Alerts, badges, progress bars, spinners, tabs, accordions, modals — every primitive a screen needs, theme-aware out of the box.
Feedback
Alerts
New release · v3.1.0
Two new components shipped today — segmented control and tonal buttons.All checks passed
CI completed in 1m 42s · 0 failing tests · ready to merge.Storage 92% full
You're approaching your plan limit. Upgrade to keep auto-backups running.Payment failed
We couldn't charge your card ending in •• 4242. Update your billing details to continue.Maintenance window scheduled for Saturday 02:00–03:00 UTC.
Indicators
Badges
Default Primary Success Warning Danger Info Purple Solid
Live Online Idle Down
Identity
Avatar group
JD SK LR MD PV +8
JD SK LR MD
Status
Progress bars
Storage7.4 / 15 GB
API quota82%
Failure rate3%
Profile completion100%
Thin · 4px
Status
Spinners
SM
DEFAULT
LG
SUCCESS
DANGER
Navigation
Tabs
The active tab uses the underline + primary color treatment. Pills variant available below.
Disclosure
Accordion
Theme is stored in localStorage and applied via a data-theme attribute on <html>. CSS variables flip in one transition. No flash on load thanks to the early-paint script.
Yes — change the --primary token in _tokens.scss. All components reference it via var(--primary), so a single edit propagates everywhere.
No — the 2026 design system is 100% vanilla JS with native classList / querySelector / IntersectionObserver.
Overlays
Modal
Delete project?
Once deleted, the Northwind dashboard and its 142 saved views can\'t be recovered. Anyone with shared links will lose access immediately.
Hints
Tooltips
Last sync 3 min ago ⌘ + Shift + P Connected · Postgres 16.2 Live