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
  • Meter
  • Multi Select
  • Native Select
  • 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
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