@usersfirst/ui gallery

Tokens · colour

Tokens · type scale

<uf-button> · the one button (host is the button; children or label)

SOLO RIDEdefault
RIDE TOGETHERvariant=accent
RIDE TOGETHERaccent + selected
VERSUS2–4 playersvariant=versus (two-line)
LEAVE ROOMvariant=danger
← Backvariant=ghost
Controllers ▾size=sm
×size=xs (icon)
size=lg · label prop
CHOOSE LEVELdisabled
FOCUSED.gamepad-focus (controller)

<uf-step> · a screen: prompt + authored content + hint

RIDE TOGETHERCo-op · one shared tandem VERSUSCompete · two tandems · 1v1–2v2 SOLO RIDEJust you

<uf-flow> · one active step, history, data-flow-go / data-flow-back

NEXT → NEXT →← Back ← Back

current:

<uf-seat> · lobby seats

open · captain
joined · stoker
ready · team-a
joined · team-b
locked

<uf-chip> · status tags

P1neutral
READYaccent
AVAILABLEinfo
ACTIVEwarn
danger · label prop