Sections

• Introduction
• Installation
• Styling
• Colors
• Forms
• Skills
• RTL
• LLMs.txt
• Changelog

Components

• Accordion
• Action Bar
• Alert Dialog
• Alert
• Announcement
• Aspect Ratio
• Autocomplete
• Avatar
• Badge
• Bottom Navigation
• Breadcrumb
• Button Group
• Button
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• Circular Progress
• Circular Slider
• Clipboard
• Collapsible
• Color Picker
• Combobox
• Command
• Context Menu
• Data List
• Date InputNew
• Date Picker
• Dialog
• DrawerUpdated
• Editable
• Field
• File Upload
• FloatUpdated
• Floating Panel
• Frame
• Hint
• Hover Card
• Image Cropper
• Input Group
• Input OTP
• Input
• Item
• Kbd
• Link Overlay
• Listbox
• Marquee
• Menu
• Native Select
• Number Input
• Pagination
• Password Input
• Popover
• Progress
• Prose
• QR Code
• Radio Group
• Rating
• Resizable
• Scroll Area
• Segment Group
• Select
• Separator
• Sheet
• Sidebar
• Signature Pad
• Skeleton
• Skip Nav
• Slider
• Spinner
• StatusUpdated
• Steps
• Switch
• Table
• Tabs
• Tags Input
• Textarea
• Timer
• Toast
• Toggle Group
• Toggle Tooltip
• Toggle
• Tooltip
• Tour
• Tree View

Utilities

• Client Only
• Download Trigger
• Format
• Highlight
• Hitbox
• JSON Tree View
• Presence
• Show
• Swap

Forms

• Formisch
• React Hook Form
• TanStack Form

Hooks

• useIsMobile

Steps

Copy Markdown

Steps in a wizard-like format.

DocsAPI

PreviewCode

1

2

3

Step 1

Step 2

Step 3

All steps completed. You're all set!

NextBack

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/steps

Anatomy#

Steps
├── StepsList
│ └── StepsItem
│ ├── StepsTrigger
│ ├── StepsIndicator
│ ├── StepsSeparator
│ ├── StepsTitle
│ └── StepsDescription
├── StepsContent
├── StepsCompletedContent
├── StepsPrevious
└── StepsNext

Usage#

import {
  Steps,
  StepsList,
  StepsItem,
  StepsTrigger,
  StepsSeparator,
  StepsIndicator,
  StepsTitle,
  StepsDescription,
  StepsContent,
  StepsCompletedContent,
  StepsNext,
  StepsPrevious
} from "@/components/ui/steps";

<Steps>
  <StepsList>
    <StepsItem>
      <StepsTrigger>
        <StepsIndicator />
        <StepsTitle />
      </StepsTrigger>
      <StepsSeparator />
    </StepsItem>
  </StepsList>
  <StepsContent />
  <StepsCompletedContent />
  <StepsPrevious />
  <StepsNext />
</Steps>

Examples#

Title#

Use StepsTitle to display a description for each step.

PreviewCode

1 Info

2 Docs

3 Team

Description#

Use StepsDescription to display a description for each step.

PreviewCode

1

InfoPersonal

2

DocsCompany

3

TeamCreate

Vertical#

Use orientation="vertical" for a vertical layout.

PreviewCode

1 InfoPersonal

2 DocsCompany

3 TeamCreate

Personal

Company

Create

Completed

NextBack

Loading#

PreviewCode

2

3

Controlled#

Use the step and onStepChange props to control the active step programmatically.

PreviewCode

1 Your details

2 Company details

3 Invite your team

Please provide your name and email address.

A few details about your company.

Start collaborating with your team.

All steps completed. You're all set!

BackNextReset

Custom Icon#

PreviewCode

API Reference#

Steps#

Root component. Manages step state and connectors.

StepsList#

Wraps the list of steps. Handles connector layout.

For a complete list of props, see the Ark UI documentation.

[

Previous page

Status ](/docs/components/status)[

Next page

Switch ](/docs/components/switch)

On This Page

InstallationAnatomyUsageExamplesTitleDescriptionVerticalLoadingControlledCustom IconAPI ReferenceStepsStepsList