About this block

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.

When to use

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

• Welcome modal blueprint

After

• Sample data banner
• App shell

What you can display

One strong use is the initial role setup step. Other picker variants:

• Use-case selector. Replace role tiles with goals like Reduce churn, Ship faster, or Monitor reliability.
• Team type picker. Startup, agency, or enterprise tiles that preset billing and seat limits.
• Notification preference step. Tiles for digest, real-time, or minimal to set default alert routing.

Tip: list exactly what changes per tile; vague personalization promises create disappointment when the layout looks the same regardless.