Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Navbar blocks

Pro

Onboarding Stepper Navbar Block for React

Wizard chrome in one bar: Save and exit at the start, four steps in the middle (finished ones take you back), and Back and a Shine Continue at the end that really advance the step, over a hairline that fills as you go.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Wizard chrome for React with Base UI, the bar above a setup flow in an onboarding builder called Rampup. It is one bar, 56 pixels tall, in cells that share hairlines, each divider meeting the top rule with a plus. At the start, Save and exit: it saves the progress and the button says "Progress saved" for a moment. In the middle, the four steps (Account, Connect data, Invite team, Launch) as a Steps list: the finished ones are buttons that take you back to them, the current one is filled, the later ones are inert. At the end, Back and a Shine Button, Continue, which really advances the state ("Finish setup" on the last step, then an Open workspace link). A hairline on the bar's bottom edge fills as steps are done. On a phone the list gives way to "Step 2 of 4, Connect data" and the two buttons keep their place. It differs from the numbered-steps banners, which show a stepper with a Resume button: this is the chrome you keep above the steps' own content. It's built from Steps, Shine Button, Button and Guides, with your theme's tokens for every colour.

FAQ

How do I change the steps?

Edit STAGES at the top of the file (an id and a title each) and START, the zero-based step it opens on. COUNT follows the list, and so do the fill on the bottom edge, "Step 2 of 4" and the last step's "Finish setup". The block holds the step in its own state; connect it to your wizard's state (or router) by changing goTo. The step's own content goes below the bar: the Steps root is the bar's column, so a step's StepsContent can sit in your page if you move the root up.

What do Continue, Back and Save and exit do?

Continue moves one step on and Back one step back (Back is inert on the first step, with aria-disabled so focus stays). Past the last step the setup is complete: the steps all show as done, the fill reaches the end, and Continue becomes an Open workspace link. Save and exit changes its label to "Progress saved" for two seconds and says so in a polite status; nothing is stored or sent, and the block can't leave the page, so wire both to your own save and navigation.

How does it work with a keyboard and a screen reader?

Tab reaches Save and exit, then the step list (one stop: the current step), then Back and Continue. Arrow keys move between the steps, Home and End jump to the ends, and Enter or Space opens a finished one. Every move is announced in a polite status ("Step 3 of 4: Invite team.", "Setup complete."), and the current step's panel holds its words ("Step 3 of 4", its name) for a screen reader.

How does it work on a phone?

Below the md breakpoint the list is hidden and the current step's panel shows instead: "Step 2 of 4" over its name. Save and exit, Back and Continue keep their place, with Save and exit and Back as icons that keep their names. Nothing wraps at 320 pixels.

Does it work right to left?

Yes. The cells run from the right, the Back chevron mirrors, the fill grows from the right and the step list reads from the right with its arrow keys following.

What moves, and what about reduced motion?

The fill on the bottom edge slides between steps, and indicators ease their colour. With reduced motion both change at once. Nothing moves on load.

  • Pro

    Numbered Steps Banner

    Numbered lists

    A setup tracker for a workspace tool: four numbered steps in a row joined by a line, finished ones checked, the current one ringed, and a Resume button under it.

  • Pro

    Numbered Onboarding Steps Banner

    Numbered lists

    An interactive five-step setup checklist as a card in card: Start completes the next step and the button moves down a row, with a live count and an All set state.

  • Pro

    Profile Checklist Progress Navbar

    Meters and progress

    A one-bar navbar for a freelancer marketplace that tracks profile completion: a hairline fill along the bar's top edge, a percentage label, and a Complete profile button that opens a checklist whose boxes raise the percentage.

  • Pro

    Settings Header Navbar

    Two rows

    A two-row settings header: the page title and one real edit (a Weekly digest switch) with Discard and Save that wake up when it changes, and a row of section tabs where the dirty one carries a dot and a spoken note.

  • Pro

    Breadcrumb Page Header Navbar

    Page headers

    An app page header: a Back button, the trail with the current page's title and a Draft badge, then behind a split divider who edited it and how long ago, and a Settings link.

  • Pro

    Stepper Wizard Progression Features

    Timelines and steps

    A working CSV import wizard in a framed card: Upload, Map columns, Preview and Import, with real Back and Next buttons, selects that match columns to fields and a preview that follows the choices.

All 100 navbar blocks