Skip to content
CroStreamUI kit

Guidance

Walking people through things: step indicators, multi-step wizards and product tours with coachmarks.

01Stepper

Stepper

Where you are in a sequence. Done steps get a tick, a step that needs attention a “!”, the current one a ring and aria-current; each state is spelled out for screen readers. In a narrow container it folds into “Step 2 of 4: Connect OBS”.

Horizontal, clickable back Completed steps are buttons; upcoming ones aren't. Move with the buttons below.
Vertical For side panels and longer descriptions; the connector fills downwards.
A step that needs attention An error is a “!” in the marker and red title, never red alone.
Narrow container Below 32rem of its own width the list folds into a line of text over a progress bar. Screen readers still get the full list.

02Wizard

Wizard

A multi-step flow with Back, Skip and Continue. Continue checks the step first (it may take a moment); problems show inline and focus moves to the first one. Each new step's heading takes focus and is announced, and the place is remembered, so closing the app mid-setup resumes there.

Get set up Try Continue without signing in, then leave the OBS password empty. Reload the page part-way through: it resumes.

Sign in with Twitch

CroStream listens to your chat and channel points as you.

In a dialog, side layout The same component inside a Dialog; the stepper moves to the side and stacks under 34rem.

03Tour

Tour

A guided tour over the real UI. The page dims except around each target and a card explains it; focus stays in the card, the arrow keys step through, Escape ends it, and focus goes back where it was. Missing targets are skipped. Under High contrast nothing dims: a thick ring marks the target instead.

Tour of the dashboard Start it, step with → and ←, and tick “Don’t show this again” to remember. One step points at nothing and is skipped.
Dashboard Live , 1,284 viewers
Viewers1,284
Moments6 clips

04Coachmark

Coachmark

A one-off hint for something new. It doesn't dim the page or take focus: it sits right after its target in the reading order, a beacon draws the eye, and “Got it” (or Escape from inside it) dismisses it for good.

New: Moments Dismiss it, reload: it stays dismissed. Reset brings it back.

05PinDisplay

PinDisplay

The other half of a PinInput: a code shown on one device to type on another. Big, spaced into groups, copyable, read one character at a time by screen readers, and counting down to when it expires.

Pair your gaming PC Left: the streaming PC shows a code. Right: the gaming PC types it. Use the code on the left; a wrong one is refused.

On your streaming PC

Pairing code

4 8 2 9 1 3

Type this on your gaming PC. It works once.

On your gaming PC

6 digits

Six digits, shown on the streaming PC.

Medium, no expiry For one-time codes in settings or emails.

Recovery code

7 K Q 2 9 X W D

Expired The code is struck through, can't be copied, and the expiry is announced once.

Pairing code

1 0 4 7 2 6, expired

This code has expired.

Codes last five minutes.