AI Components / Onboarding
Onboarding
Step-by-step tutorial with clickable progress dots, media + per-step CTA slots, crossfade transitions, arrow-key + Esc navigation, and aria-live announcements.
ai-collabv0.5.0
Playground
Examples
Dots (default for ≤4 steps)
<ai-onboarding progress="dots" active="1" dismissible style="max-width:420px;"></ai-onboarding>Numbered (eyebrow only)
<ai-onboarding progress="numbered" active="1" dismissible style="max-width:420px;"></ai-onboarding>Bar (default for 5+ steps)
<ai-onboarding progress="bar" active="2" dismissible style="max-width:420px;"></ai-onboarding>Stepper (numbered nodes)
<ai-onboarding progress="stepper" active="2" dismissible style="max-width:440px;"></ai-onboarding>Import
import { AiOnboarding } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-onboarding';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
steps | {title, description}[] | — | Tutorial steps |
active | number | 0 | Current step index |
dismissible | boolean | true | Show close button + enable Esc |
show-skip | boolean | true | Show Skip tour link (hidden on last step) |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Card border-radius variant |
progress | "auto" | "numbered" | "dots" | "bar" | "stepper" | "auto" | Progress affordance — auto picks dots for ≤4 steps, bar for 5+ |
Events
| Event | Detail | Description |
|---|---|---|
ai-onboarding-next | {step} | Next clicked |
ai-onboarding-prev | {step} | Back clicked |
ai-onboarding-step-change | {from, to} | Any step change (incl. dot click) |
ai-onboarding-complete | {} | Done clicked on last step |
ai-onboarding-dismiss | {step} | Dismissed via close, Skip, or Esc |