Onboarding
Help for the first minutes: a guided tour that points at the interface, a first-steps card driven by real data, and checklists with the way to fix each item. Progress is always said in words as well as shown.
4 pages, 7 exports
- Tour
- TourStep
- TourSpotlight
- OnboardingSteps
- OnboardingStep
- Checklist
- ChecklistItem
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { Tour, TourStep, TourSpotlight, OnboardingSteps, … } from '@skribly/ui/onboarding'Pages in this groupLink to the section Pages in this group
- TourA guided walk that dims the page, rings one element per step and explains it in a bubble beside it. Use it once after sign-up or from a Help menu; steps whose element is missing are skipped and not counted.Tour, TourStep
- TourSpotlightThe dim and the ring a Tour draws, on its own, to point at one element, such as a new feature. It never blocks the pointer, so the page stays usable.TourSpotlight
- OnboardingStepsA first-run card with what to set up, how far along the reader is and a button per step. Feed isDone from real data, so a step is done when the thing exists, not when it was ticked.OnboardingSteps, OnboardingStep
- ChecklistA list of what has to happen before something is ready, with a link to fix each item. Items can show state from data, or be checkboxes the reader ticks for a manual list.Checklist, ChecklistItem