Shadcn Onboarding Screens Blocks

Onboarding blocks built with shadcn/ui that walk a new user through a short guided setup: one question per step, progress indicator, keyboard shortcuts, skippable steps, and a completion state. Use them to collect role, team size and workspace details before the dashboard loads.

Onboarding Screen 1 Pro

Card questionnaire asking role, team size, areas to track and workspace name one at a time, with question counter, previous, skip and next actions, and a success state with Start over.

Onboarding Screen 2 Pro

Split card with a dark panel listing four steps as done, active or upcoming beside a questionnaire about goal, referral source, tools to connect and work email, ending in a completion message.

Onboarding Screen 3 Pro

Full page wizard with brand header, step count, skip button and thin progress bar, asking plan, modules, a teammate invite and workspace URL, with number key shortcuts and a keyboard hint row.

Onboarding Screen 4 Pro

Adaptive setup card where the audience answer enables or disables the roles and access policy questions, followed by a launch date, with a footer list showing which steps are asked or skipped.

Onboarding Screen 5 Pro

Cardless questionnaire with a segmented progress bar and counter, questions that fade and slide in, next and submit buttons greyed out until answered, and an animated confirmation with Run it again.

Onboarding Screen 6 Pro

Overview page with three stat cards and a placeholder panel, plus a Personalize dashboard dialog that asks for top widgets, default time range and digest recipient before closing.

Onboarding Screen 7 Pro

Three step brief flow with company type chips and a size slider, selectable service cards with check badges, and a contact form with country phone prefix, ending in a summary with next steps.

Onboarding Screen 8 Pro

Profile checklist with a completion counter and progress bar, where each of five tasks expands an inline editor for display name, photo upload, time zone, phone or role and shows a summary once saved.

Onboarding Screen 9 Pro

Card wizard with a three step numbered stepper: an organisation address form, a searchable list of integrations to connect, and a preview with edit buttons before submitting to a success state.

Onboarding Screen 10 Pro

Card wizard with a step label and a vertical timeline of sub tasks that fill in when done and unlock the next, covering project name and template, content source and team invites with a role.

PreviousDashboard Shell
NextDashboard Dropdowns

About Shadcn UI Onboarding Screens Blocks

An onboarding screen guides a new user through the first minutes in your product, collecting a few answers or finishing a few setup tasks before the dashboard opens. These ten shadcn onboarding blocks cover question by question wizards, adaptive flows, a setup dialog, a profile checklist and multi step forms with a review step.

Every flow is a single React and TypeScript file built from shadcn ui components such as Card, Button, Progress, Dialog, Select, Slider and InputGroup, styled with Tailwind CSS theme tokens. Six of them use the shadcn Questionnaire component for keyboard friendly, one question at a time forms, and the other four use plain React state, so you can pick the level of structure your shadcn blocks need.

Key Elements of an Onboarding Flow

  • Progress indicator: a counter, bar, stepper or step list that shows how much is left.
  • Focused steps: one question or a small group of related fields at a time.
  • Navigation controls: previous, skip and next actions, with skip only offered when a step is optional.
  • Validation messages: a short explanation when a required answer is missing.
  • Completion state: a confirmation with a clear next step, such as opening the dashboard.

Where and Why to Use Onboarding Screen Blocks

A good first run experience turns a blank account into a personalized workspace. It also gives you data, such as role and team size, that helps you tailor the product and your follow up emails. Since these are regular shadcn components, the flows match your dashboard visually and you only replace the sample questions with your own.

  • Post sign up setup: collect role, team size and a workspace name before the first dashboard view.
  • Dashboard personalization: let users pick widgets and a default time range from inside the app.
  • Profile completion: nudge users to add a photo, time zone and contact details.
  • Organisation setup: gather address details and connect integrations before the team joins.
  • Lead qualification: ask agency or service clients about their company and needs before a call.
  • Project creation: walk users through naming a project, connecting content and inviting teammates.

Onboarding Screen Blocks in This Collection

  • Onboarding Screen 1: A dependable default for analytics or SaaS products that want four quick questions in a compact card, with a way to restart.
  • Onboarding Screen 2: Gives the flow a branded welcome panel on desktop, which helps when users should see every upcoming step before they start.
  • Onboarding Screen 3: A full page wizard for keyboard heavy audiences, ideal when you want plan and module choices to feel fast.
  • Onboarding Screen 4: Use it when later questions depend on an early answer and users should understand why some steps disappear.
  • Onboarding Screen 5: The calmest option, with no card and gentle transitions, suited to consumer apps and personal accounts.
  • Onboarding Screen 6: Lets users reach the dashboard first and personalize it in a dialog, so setup never blocks access.
  • Onboarding Screen 7: Built for agencies and studios that qualify leads, ending with a brief summary and a call to book a kickoff.
  • Onboarding Screen 8: Fits apps where profile details can be filled in any order, editing each task in place without leaving the page.
  • Onboarding Screen 9: Suits B2B products that need company details and connected services, with a review step before anything is saved.
  • Onboarding Screen 10: Good for technical setups where each sub task unlocks the next, such as connecting a content source before inviting a team.

Similar Block Categories

  • Sign-In Forms: the screen users see right before onboarding starts.
  • Form Layouts: longer settings and profile forms for after the first run.
  • Modal Dialogs: more dialog patterns for in app setup and confirmations.
  • Empty State: guide users who skipped setup when a page has no data yet.
  • How It Works: explain the same steps on your marketing site before sign up.

Accessibility

The Questionnaire based blocks render a real form in which each question is a fieldset with a legend, answers are native radio or checkbox inputs, and inactive questions are hidden and inert. The progress element has role=“progressbar” with a polite live region, errors use role=“alert”, and items expose their keyboard shortcuts through aria-keyshortcuts. Onboarding Screen 7 to 10 pair most fields with a shadcn Label, and Screen 7 labels its slider and country select.

A few controls deserve a second look. The company type chips and service cards in Onboarding Screen 7 are buttons that show selection only visually, so consider adding aria-pressed. The invite field in Screen 10 and the integration search in Screen 9 have no label, and the step lists in Screen 2 and 9 could mark the current step with aria-current. For Screen 5, consider limiting the slide and zoom transitions to users who have not asked for reduced motion.

Onboarding Screens FAQ

An onboarding screen is a short guided flow that new users complete after signing up. It asks a few questions or walks through setup tasks so the product can open with the right defaults instead of an empty dashboard.

They are ten finished onboarding flows built with shadcn ui components and Tailwind CSS: question by question wizards, a split screen with a step list, a setup dialog, a profile checklist and multi step forms. Each block is a single index.tsx file with its sample questions inline.

The first session decides whether a new user understands the product. A short setup collects the details you need, such as role, team size or workspace name, and lets you show relevant widgets right away, which shortens the time until the product feels useful.

A clear sense of progress, one focused question or task at a time, a way to go back, a skip option for anything that is not required and a completion state with the next action. Required fields should explain themselves when they block the user.

Usually right after sign up and before the first dashboard view, as a full page or a centered card. It can also live inside the app, as a dialog the user opens when ready, as in Onboarding Screen 6, or as a profile checklist they work through over time, as in Onboarding Screen 8.

Onboarding Screen 1 to Onboarding Screen 6 build their flow with the Questionnaire component from components/ui/questionnaire, which wraps the headless Questionnaire from the @shadcn/react package. It renders a form where each question is a fieldset with a legend, shows one question at a time and handles progress, skipping, validation and submission. Install @shadcn/react before adding these blocks.

Cmd or Ctrl plus Enter moves to the next question or submits on the last one, Enter on a selected answer continues, the up and down arrows move between answers, and the left and right arrows go back or forward when focus is not in a text field. Onboarding Screen 3 also sets shortcuts="numbers", so pressing 1 to 4 picks an answer, and shows these keys in a hint row.

In the questionnaire blocks, edit two places that must match: the items array at the top of the file, which lists each question name, whether it is required and its choice values, and the QuestionnaireItem and QuestionnaireChoice elements in the markup. In development the component warns in the console when a name or value is missing on either side.

The questionnaire blocks pass an onSubmit handler that receives the native form event. Answer inputs carry the question name as their name attribute, so new FormData(event.currentTarget) gives you every answer to send to your API. The blocks call preventDefault and only switch to a success state, so add your request there.

Onboarding Screen 4. The first answer, only me, a single team or the whole company, enables or disables the roles and access policy questions through their disabled prop, and a footer list shows which steps stay active and which are skipped.

Onboarding Screen 7, Onboarding Screen 8, Onboarding Screen 9 and Onboarding Screen 10 manage their own step or task state with React useState and regular shadcn inputs. They suit flows that need richer controls than single questions, such as a slider, selectable cards, an image upload, a searchable list or a vertical task timeline.

Onboarding Screen 1 and Onboarding Screen 4 print Question x of y, Onboarding Screen 2 marks steps in a dark side panel, Onboarding Screen 3 uses a thin progress bar with a step count, and Onboarding Screen 5 draws one segment per question. Onboarding Screen 8 shows a completed counter with a progress bar, Onboarding Screen 9 a numbered stepper and Onboarding Screen 10 a Step x / 3 label.

Only Onboarding Screen 5. Each question fades and slides up as it becomes active and the success state zooms in, using tw-animate-css utility classes rather than a motion library. The other blocks switch steps without animation.

All blocks stack to a single column. Onboarding Screen 2 hides its step panel below the lg breakpoint and shows the question counter instead, Onboarding Screen 3 hides the step count below sm, and choice grids in Screen 2, 3 and 7 and the address fields in Onboarding Screen 9 only split into two columns from the sm breakpoint.

No. All ten onboarding screen blocks are part of All Access, the one-time license that also unlocks every other block, admin dashboard and template.
shadcn onboarding screens blocks
Unlock Premium Blocks & Sections
Premium blocks are part of All Access. One license unlocks the whole Shadcn UI Kit, so you can build complete pages and products instead of single sections.
  • 550+ blocks for landing pages, stores, dashboards and apps
  • 16 admin dashboards and 17 ready-made apps
  • 5 premium Next.js website templates
  • 560+ component variants and 70+ examples
  • Install with the shadcn CLI or from your AI editor through the MCP server
  • Lifetime updates, including every new block we release
Unlock Now

One-time payment, no subscription.