Onboarding flows and product tours

First-run screens that get people to their first result: checklists, welcome, setup, invites, empty states and tours.

6 variants

Switch category

From sign up to the first result

Onboarding decides whether a new account becomes an active one. The six screens here lead people to their first result quickly, with progress they can see and steps they can skip and return to later.

Getting started checklist lists the first tasks with progress and stays on the dashboard until it is done. Welcome screen greets and asks one or two questions to tailor the start. Setup wizard handles the few settings that must happen before work begins. Invite your team brings colleagues in early, First project with templates removes the blank page, Product tour with coach marks points at the parts of the interface that matter.

Aim for one meaningful result in the first session, not a complete setup. Let people skip any step and find it again later. A tour with three stops is read, one with twelve is closed, so keep coach marks for what people cannot discover alone.

Getting started checklist

Progress ring, steps that expand with an explanation and an action, hide and show, and a reward that unlocks at 100 %.

Installv1.0.1

aiw add @ai-website/onboarding

Brings along utils, kit, button, icon, sidebar

Usage

<Onboarding variant="checklist" sidebar={{ brand, items, user }} steps={[{ id, title, description, action, done }]} reward={…} help={…} />

Source

Welcome screen

A centered first screen with a drawn product preview, three ways to start and a short tour with chapters.

Installv1.0.1

aiw add @ai-website/onboarding

Brings along utils, kit, button, icon, sidebar

Usage

<Onboarding variant="welcome" brand={…} user={…} title="…" paths={[{ id, icon, title, description, cta }]} tour={{ title, duration, media }} />

Source

Setup wizard

Workspace, role and team size, goals, invites and a summary. Each step validates, phones get a compact stepper and a sticky action bar.

Installv1.0.1

aiw add @ai-website/onboarding

Brings along utils, kit, button, icon, sidebar

Usage

<Onboarding variant="wizard" brand={…} domain="lumen.app" roles={[…]} teamSizes={[…]} goals={[…]} />

Source

Invite your team

Email addresses as chips with validation, roles, an invite link to copy, joining by domain and colleagues to add with one click.

Installv1.0.1

aiw add @ai-website/onboarding

Brings along utils, kit, button, icon, sidebar

Usage

<Onboarding variant="invite-team" workspace="Atlas Studio" emailDomain="atlas-studio.de" permissions={[…]} suggestions={[…]} />

Source

First project with templates

An empty project list that invites a start, with a template gallery of drawn previews, search and categories.

Installv1.0.1

aiw add @ai-website/onboarding

Brings along utils, kit, button, icon, sidebar

Usage

<Onboarding variant="empty-state" templates={[{ id, title, description, category, kind, uses }]} categories={[…]} />

Source

Product tour with coach marks

A spotlight lifts one element above the dimmed app, the coach mark sits next to it and becomes a card at the bottom on phones.

Installv1.0.1

aiw add @ai-website/onboarding

Brings along utils, kit, button, icon, sidebar

Usage

<Onboarding variant="product-tour" board={{ title, columns }} tourSteps={[{ target: "board", title, description }]} />

Source

Details

What Onboarding brings along, read from the registry and the source.

Area: App
Variants: 6
Version: 1.0.1 · since 1.0.0
File: components/ui/onboarding.tsx
Brings along: utilskitbutton icon sidebar
npm packages: None
Languages: English and German, 96 texts of its own
Studio: Adjust in code
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The OnboardingProps interface from components/ui/onboarding.tsx, with the comments from the code.

variantoptional
OnboardingVariant
checklistwelcomewizardinvite-teamempty-stateproduct-tour
sidebaroptional
Omit<SidebarProps, 'children'>
The app frame for checklist, invite-team, empty-state and product-tour, see Sidebar
brandoptional
{ name: string; logo?: React.ReactNode; href?: string }
welcome and wizard: the product name and mark in the top bar
useroptional
{ name: string; email?: string }
The person being onboarded
titleoptional
string
descriptionoptional
string
skipHrefoptional
string
Where "skip" and "finish later" lead
stepsoptional
ChecklistStep[]
checklist
rewardoptional
{ title: string; description: string; claim: string }
helpoptional
{ name: string; role: string; label: string; href: string }
pathsoptional
StartPath[]
welcome
touroptional
{ title: string; description: string; duration: string; chapters?: { title: string; time: string }[]; media?: React.ReactNode }
domainoptional
string
wizard
rolesoptional
Option[]
teamSizesoptional
string[]
goalsoptional
Option[]
initialStepoptional
number
defaultsoptional
Partial<WizardValues>
workspaceoptional
string
invite-team
inviteLinkoptional
string
emailDomainoptional
string
The company email domain, e.g. atlas-studio.de
permissionsoptional
Option[]
suggestionsoptional
Person[]
invitedoptional
string[]
noteoptional
string
invite-team: a prefilled personal note
templatesoptional
TemplateItem[]
empty-state
categoriesoptional
{ id: string; label: string }[]
tourStepsoptional
TourStep[]
product-tour
boardoptional
TourBoard

Built-in texts

Onboarding writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 96 texts

Key	English	German
gettingStarted	English Getting started	German Erste Schritte
progress	English {done} of {total} done	German {done} von {total} erledigt
timeLeft	English About {time} left	German Noch etwa {time}
allDone	English All set	German Alles erledigt
allDoneText	English Every step is done. Your workspace is ready for the whole team.	German Jeder Schritt ist geschafft. Dein Arbeitsbereich ist bereit für das ganze Team.
hide	English Hide checklist	German Checkliste ausblenden
hidden	English Checklist hidden with {done} of {total} steps done.	German Checkliste ausgeblendet, {done} von {total} Schritten erledigt.
show	English Show checklist	German Checkliste zeigen
markDone	English Mark as done	German Als erledigt markieren
markOpen	English Mark as not done	German Als offen markieren
stepDone	English Done	German Erledigt
reward	English Your reward	German Deine Belohnung
rewardLocked	English {n} more steps to unlock	German Noch {n} Schritte bis zur Freischaltung
rewardOne	English One more step to unlock	German Noch ein Schritt bis zur Freischaltung
unlocked	English Unlocked	German Freigeschaltet
needHelp	English Need a hand?	German Brauchst du Hilfe?
welcome	English Welcome, {name}	German Willkommen, {name}
skipSetup	English Skip setup	German Einrichtung überspringen
choosePath	English How do you want to start?	German Wie möchtest du starten?
playTour	English Play the tour	German Rundgang abspielen
tourLabel	English Product tour	German Produktrundgang
stepOf	English Step {n} of {total}	German Schritt {n} von {total}
finishLater	English Save and finish later	German Speichern und später weitermachen
back	English Back	German Zurück
next	English Continue	German Weiter
create	English Create workspace	German Arbeitsbereich anlegen
edit	English Edit	German Ändern
wsStep	English Workspace	German Arbeitsbereich
wsStepText	English Name it the way your team talks about it. You can change both later.	German Benenne ihn so, wie dein Team über ihn spricht. Beides lässt sich später ändern.
wsName	English Workspace name	German Name des Arbeitsbereichs
wsUrl	English Workspace address	German Adresse des Arbeitsbereichs
wsNameError	English Give the workspace a name with at least two letters.	German Gib dem Arbeitsbereich einen Namen mit mindestens zwei Buchstaben.
wsUrlError	English Use at least three lowercase letters, numbers or hyphens.	German Mindestens drei Kleinbuchstaben, Ziffern oder Bindestriche.
teamStep	English You and your team	German Du und dein Team
teamStepText	English We use this to suggest the right templates and defaults.	German Damit schlagen wir passende Vorlagen und Einstellungen vor.
yourRole	English What do you work on?	German Woran arbeitest du?
roleError	English Pick the area closest to your work.	German Wähle den Bereich, der deiner Arbeit am nächsten kommt.
teamSize	English How many people will use it?	German Wie viele Personen arbeiten damit?
goalsStep	English Goals	German Ziele
goalsStepText	English Pick everything you want to manage here. We prepare a space for each.	German Wähle alles, was du hier steuern willst. Für jedes Ziel richten wir einen Bereich ein.
goalsLabel	English What do you want to do first?	German Was möchtest du zuerst angehen?
goalsError	English Pick at least one goal.	German Wähle mindestens ein Ziel.
inviteStep	English Invite	German Einladen
inviteStepText	English Projects move faster together. Invites are optional and can wait.	German Gemeinsam geht es schneller. Einladungen sind freiwillig und können warten.
reviewStep	English Review	German Prüfen
reviewStepText	English Check everything once more, then we set up your workspace.	German Schau noch einmal über alles, dann richten wir deinen Arbeitsbereich ein.
nobodyYet	English Nobody yet	German Noch niemand
ready	English {name} is ready	German {name} ist bereit
readyText	English Your spaces, templates and invites are set up. Have a look around.	German Bereiche, Vorlagen und Einladungen sind angelegt. Schau dich in Ruhe um.
openWorkspace	English Open workspace	German Arbeitsbereich öffnen
steps	English Setup steps	German Schritte der Einrichtung
emails	English Email addresses	German E-Mail-Adressen
emailsHint	English Separate addresses with a comma or press Enter.	German Adressen mit Komma trennen oder Enter drücken.
emailsPh	English name@company.com	German name@firma.de
emailError	English {email} does not look like an email address.	German {email} sieht nicht wie eine E-Mail-Adresse aus.
remove	English Remove {name}	German {name} entfernen
role	English Role	German Rolle
sendInvites	English Send {n} invites	German {n} Einladungen senden
sendOne	English Send 1 invite	German 1 Einladung senden
sendNone	English Add someone to invite	German Personen zum Einladen hinzufügen
note	English Personal note	German Persönliche Nachricht
noteHint	English Optional. It appears at the top of the invite email.	German Freiwillig. Sie steht oben in der Einladungsmail.
skip	English Skip for now	German Jetzt überspringen
inviteLink	English Invite link	German Einladungslink
inviteLinkText	English Anyone with this link can join as a member.	German Alle mit diesem Link können als Mitglied beitreten.
copy	English Copy link	German Link kopieren
copied	English Copied	German Kopiert
domainJoin	English Let anyone with an @{domain} address join	German Alle mit einer Adresse @{domain} dürfen beitreten
fromDomain	English People from {domain}	German Personen von {domain}
add	English Add	German Hinzufügen
added	English Added	German Hinzugefügt
sent	English {n} invites sent. They show up here once accepted.	German {n} Einladungen verschickt. Sie erscheinen hier, sobald sie angenommen sind.
pending	English Invite sent	German Eingeladen
projects	English Projects	German Projekte
emptyTitle	English Start your first project	German Starte dein erstes Projekt
emptyText	English A project holds tasks, files and conversations in one place. Start blank or take a template and adapt it.	German Ein Projekt bündelt Aufgaben, Dateien und Gespräche an einem Ort. Fang leer an oder nimm eine Vorlage und pass sie an.
startBlank	English Start blank	German Leer starten
importCsv	English Import from CSV	German Aus CSV importieren
fromTemplate	English Start from a template	German Mit einer Vorlage starten
searchTemplates	English Search templates	German Vorlagen durchsuchen
all	English All	German Alle
useTemplate	English Use template	German Vorlage nutzen
usedBy	English Used by {n} teams	German Von {n} Teams genutzt
noTemplates	English No template matches “{q}”.	German Keine Vorlage passt zu „{q}“.
clearSearch	English Clear search	German Suche leeren
creating	English {name} is being set up	German {name} wird eingerichtet
newProject	English New project	German Neues Projekt
tourStep	English {n} of {total}	German {n} von {total}
skipTour	English Skip tour	German Rundgang beenden
finish	English Finish tour	German Rundgang abschließen
tourDone	English Tour finished. You can restart it from Help at any time.	German Rundgang abgeschlossen. Du kannst ihn jederzeit über die Hilfe neu starten.
restart	English Restart tour	German Rundgang neu starten
newTask	English New task	German Neue Aufgabe
filter	English Filter	German Filter
share	English Share	German Teilen
tourKeys	English Arrow keys move through the tour, Escape ends it.	German Pfeiltasten blättern durch den Rundgang, Escape beendet ihn.

Read from the source of the component.

Onboarding handles the keys Escape, Enter, Arrow up, Arrow down, Arrow left, Arrow right, Home, End, Backspace and Space itself.
Sets aria-checked, aria-controls, aria-current, aria-describedby, aria-expanded, aria-invalid, aria-label, aria-labelledby, aria-live, aria-modal, aria-pressed and aria-selected, so screen readers announce purpose and state.
Uses the roles dialog, radio, radiogroup, status, switch, tab, tablist and tabpanel.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 11 places in the code switch motion off then.

Frequent questions

How do I install Onboarding?

With aiw add @ai-website/onboarding. The command puts components/ui/onboarding.tsx into your project, the code is yours from then on. It brings along button, icon and sidebar. It needs no further npm packages.

Which variants does Onboarding have?

6 variants, Getting started checklist, Welcome screen, Setup wizard, Invite your team, First project with templates and Product tour with coach marks. You pick one with the variant prop, for example variant="welcome".

Can I translate the texts of Onboarding?

Yes. Onboarding carries 96 texts of its own in English and German, such as “Getting started”, “All set” and “Every step is done. Your workspace is ready for the whole team.”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Onboarding?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Onboarding with aiw_components and install it with aiw_add @ai-website/onboarding. Name the variant in your prompt, for example variant="checklist", and the assistant writes your content straight into the props.

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to Onboarding on a page.

From sign up to the first result

Onboarding

Getting started checklist

Welcome screen

Setup wizard

Invite your team

First project with templates

Product tour with coach marks

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with