Onboarding und Produkttouren

Bildschirme für den ersten Start, die zum ersten Ergebnis führen: Checklisten, Begrüßung, Einrichtung, Einladungen, leere Zustände und Rundgänge.

6 Variants

Kategorie wechseln

Von der Registrierung zum ersten Ergebnis

Das Onboarding entscheidet, ob aus einem neuen Konto ein aktives wird. Die sechs Screens hier führen Menschen schnell zu ihrem ersten Ergebnis, mit sichtbarem Fortschritt und Schritten, die man überspringen und später nachholen kann.

Die Checkliste für den Start listet die ersten Aufgaben mit Fortschritt und bleibt auf dem Dashboard, bis alles erledigt ist. Der Willkommensbildschirm begrüßt und stellt ein oder zwei Fragen, um den Start anzupassen. Der Einrichtungsassistent regelt die wenigen Einstellungen, die vor der Arbeit nötig sind. „Team einladen“ holt Kollegen früh dazu, „Erstes Projekt mit Vorlagen“ nimmt die leere Seite, der Rundgang mit Hinweisen zeigt auf die wichtigen Teile der Oberfläche.

Ziel ist ein sinnvolles Ergebnis in der ersten Sitzung, nicht eine vollständige Einrichtung. Lass jeden Schritt überspringen und später wiederfinden. Eine Tour mit drei Stationen wird gelesen, eine mit zwölf geschlossen, nutze Coach Marks für das, was man allein nicht findet.

Checkliste für den Start

Fortschrittsring, aufklappende Schritte mit Erklärung und Aktion, ein- und ausblenden und eine Belohnung, die bei 100 % freischaltet.

Installv1.0.1

aiw add @ai-website/onboarding

Bringt mit utils, kit, button, icon, sidebar

Usage

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

Source

Willkommensbildschirm

Ein mittiger erster Bildschirm mit gezeichneter Produktvorschau, drei Wegen zum Start und einem kurzen Rundgang mit Kapiteln.

Installv1.0.1

aiw add @ai-website/onboarding

Bringt mit utils, kit, button, icon, sidebar

Usage

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

Source

Einrichtungsassistent

Arbeitsbereich, Rolle und Teamgröße, Ziele, Einladungen und eine Zusammenfassung. Jeder Schritt prüft, Telefone bekommen eine kompakte Schrittanzeige und eine feste Aktionsleiste.

Installv1.0.1

aiw add @ai-website/onboarding

Bringt mit utils, kit, button, icon, sidebar

Usage

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

Source

Team einladen

E-Mail-Adressen als Chips mit Prüfung, Rollen, ein Einladungslink zum Kopieren, Beitritt über die Domain und Kollegen mit einem Klick.

Installv1.0.1

aiw add @ai-website/onboarding

Bringt mit utils, kit, button, icon, sidebar

Usage

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

Source

Erstes Projekt mit Vorlagen

Eine leere Projektliste, die zum Anfangen einlädt, mit Vorlagengalerie aus gezeichneten Vorschauen, Suche und Kategorien.

Installv1.0.1

aiw add @ai-website/onboarding

Bringt mit utils, kit, button, icon, sidebar

Usage

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

Source

Rundgang mit Hinweisen

Ein Spotlight hebt ein Element über die abgedunkelte App, der Hinweis steht daneben und wird auf dem Telefon zur Karte am unteren Rand.

Installv1.0.1

aiw add @ai-website/onboarding

Bringt mit utils, kit, button, icon, sidebar

Usage

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

Source

Details

Was Onboarding mitbringt, aus Registry und Quellcode gelesen.

Bereich: App
Variants: 6
Version: 1.0.1 · seit 1.0.0
Datei: components/ui/onboarding.tsx
Bringt mit: utilskitbutton icon sidebar
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 96 eigene Texte
Studio: Im Code anpassen
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle OnboardingProps aus components/ui/onboarding.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

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

Eingebaute Texte

Diese Texte schreibt Onboarding selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 96 Texte anzeigen

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

Aus dem Quellcode der Component abgeleitet.

Onboarding reagiert selbst auf die Tasten Escape, Enter, Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts, Pos1, Ende, Rücktaste und Leertaste.
Setzt aria-checked, aria-controls, aria-current, aria-describedby, aria-expanded, aria-invalid, aria-label, aria-labelledby, aria-live, aria-modal, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen dialog, radio, radiogroup, status, switch, tab, tablist und tabpanel.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 11 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Onboarding?

Mit aiw add @ai-website/onboarding. Der Befehl legt die Datei components/ui/onboarding.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon und sidebar. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Onboarding?

6 Varianten, Checkliste für den Start, Willkommensbildschirm, Einrichtungsassistent, Team einladen, Erstes Projekt mit Vorlagen und Rundgang mit Hinweisen. Du wählst sie mit der Prop variant, zum Beispiel variant="welcome".

Kann ich die Texte von Onboarding übersetzen?

Ja. Onboarding bringt 96 eigene Texte auf Deutsch und Englisch mit, etwa „Erste Schritte“, „Alles erledigt“ und „Jeder Schritt ist geschafft. Dein Arbeitsbereich ist bereit für das ganze Team.“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Onboarding einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Onboarding mit aiw_components und installieren sie mit aiw_add @ai-website/onboarding. Nenn im Prompt die Variante, etwa variant="checklist", dann schreibt der Assistent deine Inhalte direkt in die Props.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Onboarding stehen.

Von der Registrierung zum ersten Ergebnis

Onboarding

Checkliste für den Start

Willkommensbildschirm

Einrichtungsassistent

Team einladen

Erstes Projekt mit Vorlagen

Rundgang mit Hinweisen

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit