Steps

free

Steps track progress through a multi-stage flow like checkout or onboarding.

Account

Shipping

Payment

Review

import Steps from '@/components/ui/steps';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Steps

pnpm dlx nateui@latest add Steps

yarn dlx nateui@latest add Steps

Examples

Basic

import Steps from '@/components/ui/steps';

export default function BasicDemo() {
  return (

Title

Cart

Address

Delivery

Confirm

import Steps from '@/components/ui/steps';

export default function TitleDemo() {
  return (

Custom Icon

In review

Documents

Approved

import Steps from '@/components/ui/steps';
import Spinner from '@/components/ui/spinner';
import { PiFileMagnifyingGlass, PiSealCheck, PiSignIn } from 'react-icons/pi'

Error

Details

Payment

Review

Done

import Steps from '@/components/ui/steps';

export default function ErrorDemo() {
  return (

Vertical

Account

Shipping

Payment

Review

import Steps from '@/components/ui/steps';

export default function VerticalDemo() {
  return (

Description

AccountCreate your workspace login

TeamInvite the people you work with

BillingAdd a payment method

LaunchPublish your first project

import Steps from '@/components/ui/steps';

export default function DescriptionDemo() {
  return (

Controlled

Account

Shipping

Payment

Review

Step 1 of 4 — Account

import { useState } from 'react';
import Steps from '@/components/ui/steps';
import Button from '@/components/ui/button';

API

Steps is a compound component. Steps owns the current index and derives each item's status from it, while Steps.Item renders one stage and can override its own status, icon, title, and description.

Steps

Prop	Description	Type	Default
`current`	Zero-based index of the active step. Earlier steps render as complete, later steps as pending.	`number`	`0`
`status`	Status applied to the active step. Use `'error'` to flag a failed step in the flow.	`StepStatus`	`'in-progress'`
`vertical`	Stack steps vertically instead of in a horizontal row.	`boolean`	`false`
`onChange`	Fired with a step index when a step is clicked. Providing it makes steps clickable.	`(index: number) => void`	-
`className`	Extra classes for the steps container.	`string`	-

Steps.Item

Prop	Description	Type	Default
`title`	Step label shown beside or below the indicator.	`string \| ReactNode`	-
`description`	Supporting text under the title. Renders only when `Steps` is `vertical`.	`string \| ReactNode`	-
`customIcon`	Node rendered inside the indicator in place of the check, cross, or step number.	`string \| ReactNode`	-
`status`	Overrides the status derived from `current` for this step.	`StepStatus`	-
`className`	Extra classes for the step item.	`string`	-

Types

type StepStatus = 'complete' | 'pending' | 'in-progress' | 'error'