Tour Step, side placement, hands-on

Teaching a navigation by having people use it.

Get Pro to installPro9 blocksReact, Vue and Figma
MCPConnect the MCP server

Good morning, Ethan

Tuesday 7 November

Blocks copied128
Tokens342
Members12

More in Onboarding Tours#

Tour Step

Multi-step product walkthroughs, first-run feature tours

Tour Step, glide

Tours where the eye should follow the card from target to target

Tour Step, hands-on

Onboarding that teaches by doing: each step asks for the real control

Tour Step, side placement

Pointing at a nav rail, a sidebar item or anything against an edge

Tour Step, side placement, glide

Rails where the eye should follow the tour from item to item

Tour Step, side placement, hands-on

Teaching a navigation by having people use it

Tour Spotlight

Feature announcements, a short "What's new" walk where every step has its own picture

Tour Spotlight, glide

A tour that should feel like one motion across the page

Tour Spotlight, hands-on

Show it, then let people try it: first-run checklists and activation tours

When to use#

  • A first run where a few controls carry the whole product and nothing on screen says which
  • A feature launch aimed at people who already know the app and need one thing pointed at
  • A control living in a rail or a corner that nobody looks at unaided
  • A workflow whose order matters and whose layout does not imply that order

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.