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

Storage 7.4 / 15 GB
API quota 82%
Failure rate 3%
Profile completion 100%
Thin · 4px
Status

## Spinners

SM
DEFAULT
LG
SUCCESS
DANGER
Navigation

## Tabs

Overview Activity 12 Settings Billing
The active tab uses the underline + primary color treatment. Pills variant available below.
Day Week Month Year
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