Steps

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/cli@latest add Steps

pnpm dlx @nateui/cli@latest add Steps

yarn dlx @nateui/cli@latest add Steps

Examples

Basic

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

export default function BasicDemo() {
  return (

Title

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

export default function TitleDemo() {
  return (

Custom Icon

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

Error

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

export default function ErrorDemo() {
  return (

Vertical

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

export default function VerticalDemo() {
  return (

Description

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

export default function DescriptionDemo() {
  return (

Controlled

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'