HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Menubar
  • Meter
  • Multi Select
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sonner
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Stepper

PreviousNext

Progress through a multi-step flow, with numbered steps, lines that fill as steps complete, and the content for the active step.

Base UIReact AriaRadix UI
Radix UI
Import transactions

The last 90 days.

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/stepper.json

Usage#

import {
  Stepper,
  StepperContent,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperList,
  StepperNext,
  StepperPrev,
  StepperSeparator,
  StepperText,
  StepperTitle,
  StepperTrigger,
} from "@/components/ui/stepper"
<Stepper value={step} onValueChange={setStep} linear>
  <StepperList aria-label="Onboarding">
    {steps.map((s, i) => (
      <StepperItem key={s.title} step={i + 1} completed={done.has(i + 1)}>
        <StepperTrigger>
          <StepperIndicator />
          <StepperText>
            <StepperTitle>{s.title}</StepperTitle>
            <StepperDescription>{s.description}</StepperDescription>
          </StepperText>
        </StepperTrigger>
        <StepperSeparator />
      </StepperItem>
    ))}
  </StepperList>
  <StepperContent step={1}>...</StepperContent>
  <StepperContent step={2}>...</StepperContent>
  <StepperPrev />
  <StepperNext onClick={(e) => !valid && e.preventDefault()} />
</Stepper>

Parts#

  • Stepper. Holds the active step. Pass value and onValueChange to control it, or defaultValue. Set orientation to vertical to put the steps beside the content. With linear, a step can only be opened once every step before it is complete.
  • StepperItem. One step. Mark it completed, disabled or error. The current step gets aria-current="step".
  • StepperTrigger. The button for a step. Arrow keys, Home and End move between steps.
  • StepperIndicator. Shows the step number, a check once complete, or a warning when the step has an error.
  • StepperText, StepperTitle, StepperDescription. The label beside the indicator. On phones the horizontal list hides the labels and shows "Step 2 of 4" with the active title underneath.
  • StepperSeparator. The line to the next step. It fills when the step is complete.
  • StepperContent. Shown only while its step is active, and fades in when it appears.
  • StepperPrev, StepperNext. Move back and forward. Call preventDefault in onClick to hold the current step, for example while a field is invalid.
  • useStepper. Read value, count, isFirst and isLast, and call next, prev or setValue from inside the stepper.
StatSwitch

On This Page

InstallationUsageParts