Composition / Workflow
Onboarding Progress Sequence
Guide a controlled or self-managed setup flow with animated panels and explicit progress.
Step 1 of 4: Profile
01 / Identity
Set up your profile
Choose how your teammates will recognize you across the workspace.
Delivery contract
Install it
pnpm add easecraft@0.1.0The composition imports stable APIs from easecraft.
Files / 02
- utility
components/easecraft/compositions/onboarding-progress-sequence-core.tsx - composition
components/easecraft/compositions/onboarding-progress-sequence.tsx
Dependencies / 03
- easecraft
- npm / 0.1.0
- react
- peer / >=18.2.0 <20.0.0
- react-dom
- peer / >=18.2.0 <20.0.0
Component graph
Foundations
Interaction contract
Keyboard
- ArrowLeft / ArrowRight / ArrowUp / ArrowDown
- Moves focus through enabled progress steps without changing the active step.
- Home / End
- Moves focus to the first or last enabled step.
- Enter / Space
- Activates the focused step or navigation control.
- Tab / Shift+Tab
- Moves between the step list, active panel, and navigation controls.
Release requirement
Accessibility
- Pattern
- onboarding-stepper
- Focus management
- Required
- Reduced motion
- Immediate semantic fallback
- Note
- Uses linked tab and tabpanel semantics with ordered complete, current, and upcoming states.
- Note
- Announces the active step position in one polite live region and skips disabled steps.