Orvain UI

Tour Step, hands-on

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

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

Projects

4 active · updated 2 min ago

Marketing site
Updated 2 hours ago
In review
Billing settings
Updated yesterday
Draft
Docs refresh
Updated 3 days ago
Live
Mobile app
Updated last week
Draft

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.

Open in BlocksSee plans