Skip to content
CroStreamUI kit

Selection & navigation

Pick one from many, search as you type, switch views, and act on things from a menu.

01Select

Select

Pick one value from a list. Reads like a field, opens a floating list with typeahead, groups, descriptions and a check on the chosen row.

Anatomy, open Static so it shows in screenshots; the live ones are below.
  • --cs-surface-3
  • --cs-elev-3
  • --cs-radius-lg
  1. Selected a check and a heavier label, never colour alone
  2. Highlighted one step up the surface ladder; a yellow ring in High contrast
  3. Disabled still readable, skipped by arrow keys and typeahead
Live Click, or focus and press Space, ↓, or start typing a name.

Switches OBS when the trigger fires.

28 sounds: the list scrolls, with arrows at either end.

Pick a quality before going live.

Disabled until OBS is connected.

Sizes sm for toolbars and tables, md for forms, lg for onboarding.
Density Compact is the app's working density.
comfortable
compact

02Combobox

Combobox

Type to filter, then pick. For long lists people search rather than scan: macros, sounds, viewers. Single or several, with the match underlined.

Anatomy, open Typing “ho”: matches underlined, groups without a match drop out.
  • --cs-accent-text
  • .cs-float-match
Live Arrow keys move, Enter picks, Escape closes. In the multiple one, Backspace in the empty field removes the last chip.

Search by name or by what it does.

  • Follow
  • Raid

Any of these events fires the trigger.

Try typing something that isn't there.

optionLead, optionEnd and lead: a mark per option, a tag at the end, the chosen mark in the field.

Disabled while the trigger is paused.

03Tabs

Tabs

Switch between views of the same thing. The indicator is measured from the active tab and springs to the next; labels reserve their bold width so nothing shifts.

Underline Page-level sections. Arrow keys move between tabs, Home and End jump; disabled tabs are skipped.
  • --cs-accent-fg
  • --cs-ease-spring

12 events since you went live: 9 follows, 2 subs and a raid from pixel_mage.

Pill Compact switches inside a panel: a raised chip slides behind the labels.
Density The same strip, comfortable and compact.
comfortable
compact
Vertical Settings-style navigation: ↑ and ↓ move, the bar slides down the edge.

OBS

Connected to OBS 31 on localhost:4455. Scene switching and the replay buffer are available.

Editor tabs Per-tab error counts and badges, actions pinned at the end (outside the tab list, so they're plain buttons), and labels that fold to icons in a narrow strip.

05ContextMenu

ContextMenu

The same rows, opened where you right-click, long-press, or press the Menu key on a focused row. A shortcut, never the only way in: every action also lives on a visible control.

Live Right-click (or long-press) a trigger. Keyboard: Tab to a row, then Shift+F10 or the Menu key.
  • Hydrate! Channel points · 120
  • Lurk mode !lurk · everyone
  • Raid welcome Raid · 5+ viewers

Right-click a row