Screens
Components
Your components drawn with your tokens, checked automatically, so a reviewer can see what a change does before it ships.
What it’s for
Numbers in a list don’t show what a change looks like. Components does: add a few of your real components (a button, an input, a card), bind their colours, spacing and type to your tokens, and Stoaken draws them with your tokens in every mode.
Each time a release is proposed, Stoaken draws them again with the new values, and the reviewer sees before and after side by side in the Command Center. These are the visual checks.
The wall
Every component appears as a tile with a ring that sums up three checks. Ones that need a look come first. Filter by Need a look, Changed in release or All fine.
- Tokens
- Every prop bound to a token really shows that token’s value when drawn.
- Accessibility
- An automatic accessibility check of each drawing. Some results need a person to check.
- Clicks
- Presses and key presses you described behave as described (for example, a switch turns on when clicked).
A component up close
Open a component to put it on the bench: a big live preview, its captures in every state and mode, and, if a release changed it, before and after. The panel shows the verdict for each check, which props are bound to which tokens, and Try other values to see it with different values without saving anything.
If a release is waiting that changes it, Review in Command Center takes you to that release.
Adding a component
- Add component (on a computer). Start from one of the base components (actions, forms, feedback, content, navigation), a blank one, or Your own code: a single-file React component.
- Bind each prop to a token. Stoaken suggests matches from your Brand’s tokens.
- Edit the code with a live preview in any mode.
- Optionally add click checks: what should happen when someone clicks or presses a key.
- Name it and save. It’s drawn straight away, and every release from now on captures it.
Good to know: Components run in a sandbox with React only: no other packages, and no network. Keep each one to a single file.
Tip: On the Free plan, visual checks cover the default mode, with a monthly allowance. Team checks every mode.
When a check couldn’t be taken
Sometimes a capture fails: a component took too long, or something wasn’t set up when the release was proposed. The page says how many checks couldn’t be taken, and why: the reason names the step that stopped (starting the browser, loading the page, drawing the component, or taking the picture) and how long the others took. Once the cause is fixed, Capture again takes that release’s checks again with the same tokens. They take a minute or two; refresh to see them. The new captures replace the failed ones everywhere, including the Command Center.
Looking for the API, CLI or AI agents? They’re in the developer docs.