Role Selection Step
Onboarding role picker with three tiles showing what each role changes in the default layout, one selected.
Onboarding role picker with three tiles showing what each role changes in the default layout, one selected.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Role Selection Step is an onboarding role picker inside a single card: three tiles for Engineer, Designer, and Manager, each listing what changes if that role is picked (API keys panel shown by default; Design tokens panel shown by default; Seats and billing shown by default). The Engineer tile is shown selected with a ring and a Selected badge. A caveat at the foot reads: This only sets your default view. Every panel, report, and setting is visible regardless of which role you pick.
Roles are one typed array with a selected flag; the tile classes branch on that flag. The honest footer note is what stops the but I picked Engineer and now I cannot see billing support ticket.
Reach for this block as a step in a linear onboarding flow, after the welcome dialog and before the first dashboard. Wire the Continue button to persist the role and advance the step index.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the initial role setup step. Other picker variants:
Tip: list exactly what changes per tile; vague personalization promises create disappointment when the layout looks the same regardless.