web/components/ui

Buttons

The bezel Button — the app's unified interactive primitive. `primary` is reserved for the dominant affordance on a surface (at most one per region); `ghost` is the header/panel default; IconButton is the icon-only form.

Variants

NewAccentExportGhostDeleteLink

States

⣿SavingDisabledActive

web/components/ui

Badges

Badge is the larger pill chip for cards and tabs; StatusBadge is the tiny inline pill for row-level state (Public, Connected, Installed, …).

Badge

DefaultSecondaryOutlineDestructive

StatusBadge tones

neutralaccentaccentSolidwarningsuccesscaution

web/components/ui

Tooltips

Radix tooltip with the app's delays and elevation; keyboardHint renders the shortcut chips inline. The first one is pinned open for reference — hover the second.

Always openHover me

web/components/ui

Indicators

Progress for determinate work; KeyHint renders keyboard shortcuts as key chips in the regular UI face (mono glyphs are hard to read).

Progress

KeyHint

⌘K⌘Shift.CtrlShiftP

web/components/ui

Surfaces

RaisedSurface centralises the recurring raised-muted-tile look (inset highlight + soft drop shadow) used for icon tiles, badges, chips, and nav cards.

muted

background

subtle

accent

pill

web/components/ui

Spinners & shimmer

CharSpinner cycles braille glyphs for loading states (the `z` variant is the app default); TextShimmer sweeps a highlight across streaming or pending labels.

CharSpinner variants

⠃z⣿opus⢕rune⢕spell

TextShimmerThinking about it…

www/components/ui

Chips

BrandedChip is the inline link chip used in marketing prose — brand-tinted for Discord and GitHub, neutral otherwise.

DiscordGitHubNeutral chip