Developer optionsWidget catalog

Widgets

Reusable components for screens. Change the shared component once, then every screen follows.

Component list

Source of truth

ShiftCardOpen, confirmed, live, review, and completed shift cards. View BadgesShared status, metadata, and filter badge colors. View StatsKey operational metric cards for dashboards. View

Badges

shared/badge.css

Stats

shared/stat-card.css

ShiftCard

Uses badges

Developer note

Use catalog components everywhere

For badges use <superwizer-badge> or the .sw-badge classes. ShiftCard already consumes the same badge tokens, so status colors stay consistent across chat, team details, schedule, and history.