Onboarding - Welcome

The welcome blocks are the first thing a new user sees after signing up. They collect a little context, point at the next step and never trap anyone, so each one has a skip or dismiss action. Selections live in plain refs and typed props (roles, options, plans, slides, steps) hold the sample content, so replace the handlers with a call to your own API.

Names and plans are fictional. Selection cards are real radio groups and checkboxes, so they work with the keyboard and screen readers, and counts are announced through live regions.

Style One

Welcome screen with a greeting, three quick start cards that get a check when you click them, a primary action and a skip link.

Style Two

Product tour with one slide at a time, clickable progress dots, back and next buttons, a skip link and a get started button on the last slide.

Style Three

Role picker built from a radio group styled as cards. Continue stays disabled until a role is selected.

Style Four

Use case picker with multi select checkbox cards, a live selected count and a clear shortcut.

Style Five

Plan picker with a monthly and yearly switch, three selectable plan cards with a recommended badge and a continue button that names the chosen plan.

Style Six

Personalised welcome banner for the dashboard with the user's avatar, a circular setup progress, the next recommended step and a dismiss button.