Components
Guided tour
Guided tour
Driver.js-powered onboarding sequence. Walks new users through the sidebar, area switcher, user menu, and search — once, on first login.
Canonical
Step 2 of 5
Find anything fast
Hit Cmd-K to open search anywhere in the app.
One Driver.js step. The element popover anchors to a target selector and shows a title, body and Back / Next / Skip controls. The tour ships as a flat array of step configs.
Variants
3 step shapes👋
Welcome to Koala
Take a quick tour.
Welcome
centred, no element
Step 3 of 5
Find anything fast
Cmd-K opens search.
Middle
anchored to an element
Step 5 of 5
You're ready
Jump in.
Final
Done replaces Next
States
2 statesSearch
Cmd-K opens it.
Active
Tour complete
Completed
Driver.js step config
5 keys| Key | Type | Notes |
|---|---|---|
| element | selector | Target the popover anchors to. Omit for a centred welcome step. |
| popover.title | string | Step heading. |
| popover.description | string | Step body. |
| popover.showButtons | string[] | Which controls to render. Hide previous on the first step. |
| popover.onCloseClick | callback | POSTs to /api/guided-tour/complete so the tour doesn't repeat. |
Do & don't
Step 2 of 5
Quotes live here
Create, send, accept.
Do
Keep each step short. One concept, one element. Five steps cover the whole portal.
Step 14 of 28
Sub-feature of a sub-feature
Lengthy explanation of an edge case that doesn't matter on day one and will be forgotten before the user even gets there. Two more paragraphs follow.
Don't
Don't try to document every feature. The tour earns its place by being short — users dismiss anything longer than five steps.