StatBadge
Status pill that maps a progress status onto the semantic badge tones.
◇ React◇ Vue◇ Svelte◇ Angular
Reference
Recipes
Compositions built from the primitives — a status badge, a stack of alerts, a card with a bar, a dialog with a form, a dialog with a filtered list. Each is shown in full, because the arrangement is the part you were going to change anyway.
These are examples, not components.
All 5 are built from primitives the four packages do ship, so each one works the same in React, Vue, Svelte and Angular. Nothing here is installed: open a page, read the composition, copy it.
CalloutList
Severity feed with built-in loading and empty states. Like every recipe, it renders an empty state rather than throwing when handed missing or malformed data.
◇ React◇ Vue◇ Svelte◇ Angular
ProgressCard
Card with a progress bar whose colour crosses a threshold, plus an optional action row. Values are clamped to 0–100.
◇ React◇ Vue◇ Svelte◇ Angular
FormDialog
Modal form with a focus trap and Escape-to-close, built on the animation layer’s `[data-state]` overlay.
◇ React◇ Vue◇ Svelte◇ Angular
CommandPalette
⌘K search over a command list — a real listbox with full keyboard navigation.
◇ React◇ Vue◇ Svelte◇ Angular