Components
Creator onboarding progress
Help a creator understand which setup tasks remain without confusing automatic checks with manual completion.
On this page
Purpose and usage
Help a creator understand which setup tasks remain without confusing automatic checks with manual completion.
Anatomy
| Part | Contract |
|---|---|
| Progress | Fill percentage and written count |
| Step | Icon, title, description and action |
| State | Automatic evidence plus user-marked completion |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| currentStep / totalSteps | CompletionBar derives percentage |
| OnboardingStep | Action URL or course path and completion props |
| Store | Shared listeners and per-user browser manual state |
State coverage
| State | Implemented behavior |
|---|---|
| Incomplete | Guidance remains available |
| Complete | Source completion icon |
| Automatic/manual | Separate source flags |
Interaction and composition
- Supply a positive total; CompletionBar does not guard division by zero.
- Do not present browser-stored manual completion as a verified backend outcome.
- Keep help and primary action understandable outside the icon.
Accessibility and readiness
CompletionBar has visible count text but no progressbar semantics. Some coursePath actions use role=button on a span; keyboard activation needs review. Demo progress counts are specimen values.
Composition example
<CompletionBar currentStep={completedCount}
totalSteps={stepCount} />Source references
| File | Responsibility |
|---|---|
| src/components/onboarding/CompletionBar.tsx | Numeric completion and progress fill |
| src/components/onboarding/OnboardingStep.tsx | Actionable setup guidance |
| src/hooks/useOnboardingProgress.ts | Shared automatic/manual state |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1