Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dialog examples · Standard

Onboarding Dialog for React

A four-step onboarding dialog with an illustration, step dots, a Skip button and a Next button that becomes Get Started.

Framework
UI library

First impressions decide whether people stay. This React dialog walks through four short steps, each with an illustration, a title and a line of text, with dots for progress and a Skip button. It's shadcn.io's Dialog on Base UI, with the step's title and text as the dialog's title and description.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How many steps should onboarding have?

Three to five, one idea each. Measure where people drop off and cut the steps nobody needs.

Should people be able to skip?

Always. Skip jumps to the last step here, and the close button and Escape close the dialog at any point.

How do the progress dots work?

They're mapped from the steps, with bg-foreground on the current one and bg-muted on the rest. They're decorative and aria-hidden; the title changes with each step.

Is each step announced?

Each step's title and text are the DialogTitle and DialogDescription, so the dialog is always labelled by the current step.

What should the illustration show?

Your product, ideally: a screenshot or a short animation of the feature. The demo uses a large Lucide icon on bg-muted for each step.

What should Get Started do?

It closes the dialog, and closing resets the steps for the next time. Point it at the first useful action in your app. Pass open and update it in onOpenChange, which receives the new boolean.

All 17 dialog examples