OnboardingSteps

A first-run card with what to set up, how far along the reader is and a button per step. Feed isDone from real data, so a step is done when the thing exists, not when it was ticked.

OnboardingSteps
OnboardingStep

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, OnboardingSteps

First steps

Add a project, done
A folder with a repository. The base branch and the commit style are found for you.
Connect a task tracker, to do
Your tasks in one list.
Find agents, to do
Looks for installed command line agents. The first try fails on purpose.
Install skills, to do
Ready instructions for agents, matched to the project.
Try the keyboard, to do
Press ? anywhere to see every shortcut. This one has a long title to show how text wraps in a narrow column.

Dark theme, OnboardingSteps

First steps

Add a project, done
A folder with a repository. The base branch and the commit style are found for you.
Connect a task tracker, to do
Your tasks in one list.
Find agents, to do
Looks for installed command line agents. The first try fails on purpose.
Install skills, to do
Ready instructions for agents, matched to the project.
Try the keyboard, to do
Press ? anywhere to see every shortcut. This one has a long title to show how text wraps in a narrow column.

High contrast theme, OnboardingSteps

First steps

Add a project, done
A folder with a repository. The base branch and the commit style are found for you.
Connect a task tracker, to do
Your tasks in one list.
Find agents, to do
Looks for installed command line agents. The first try fails on purpose.
Install skills, to do
Ready instructions for agents, matched to the project.
Try the keyboard, to do
Press ? anywhere to see every shortcut. This one has a long title to show how text wraps in a narrow column.

UsageLink to the section Usage

tsx

import { OnboardingSteps, OnboardingStep } from '@skribly/ui/onboarding'

tsx

<OnboardingSteps title="First steps" doneLabel="done" todoLabel="to do"
  progressLabel={(done, total) => `${done} of ${total} done`}
  completeMessage="All set">
  <OnboardingStep title="Add a project" isDone={projects.length > 0} actionLabel="Add project" onAction={add} />
</OnboardingSteps>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A region named by its title with a progress bar whose value is read in words.
Each row says "done" or "to do" after its title, and a done row also shows a check and a strike-through.
Every action is named with its row, such as "Connect, Connect a task tracker".
Errors carry an icon and a word; the complete message is announced politely.

This demo runs through axe in all three themes on every test run. See what the tests check.