Steps

Steps communicate progress through numbered steps, providing a wizard-like workflow.

Preview
Code

Step01

Step02

This is a description

Step03

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/steps

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  StepsRoot,
  StepsStep,
  StepsIndicator,
  StepsStatus,
  StepsContent,
  StepsSeparator,
} from '@melio-ui/steps';

StepsRoot: All parts of the steps are included.
StepsStep: A single step in the sequence.
StepsIndicator: A component displaying markers that update as the user advances through steps, clearly tracking progress.
StepsStatus: Indicates the status of the step.
StepsContent: Additional content for a step.
StepsSeparator: Divider between steps.

Another way to import

'use client';

import { Steps } from '@melio-ui/steps';

<Steps.Root currentStep={1}>
  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step01</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step02</div>
      <div>This is a description</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>
</Steps.Root>;

'use client' must be used when rendering on the server side.

API Reference

StepsRoot

All parts of the steps are included.

Prop	Type	Default	Description
currentStep	`number`	-	Index of the current step.
orientation	`TypeAttributes.Orientation "horizontal" \| "vertical"`	-	Direction for the placement of the Steps component.

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"

StepsStep

A single step in the sequence.

Prop	Type	Default	Description
status	`StepStatusValue "finish" \| "wait" \| "process" \| "error"`	-	Sets the state of the step.

Data attribute	Values
[data-status]	"finish" \| "wait" \| "process" \| "error"
[data-orientation]	"horizontal" \| "vertical"

StepsIndicator

A component displaying markers that update as the user advances through steps, clearly tracking progress.

Prop	Type	Default	Description
children*	`React.ReactNode \| (status: StepStatusValue) => React.ReactNode`	-	An element that renders the state of a step.

Data attribute	Values
[data-status]	"finish" \| "wait" \| "process" \| "error"
[data-orientation]	"horizontal" \| "vertical"

StepsStatus

Indicates the status of the step.

Prop	Type	Default	Description
finish	`React.ReactNode`	-	Element indicating completion status.
wait	`React.ReactNode`	-	Element indicating waiting state.
process	`React.ReactNode`	-	Element that indicates the state of the process.
error	`React.ReactNode`	-	Element indicating error state.

Data attribute	Values
[data-status]	"finish" \| "wait" \| "process" \| "error"
[data-orientation]	"horizontal" \| "vertical"

StepsContent

Additional content for a step.

Prop	Type	Default	Description
children*	`React.ReactNode \| (status: StepStatusValue) => React.ReactNode`	-	An element that renders the content of a step.

Data attribute	Values
[data-status]	"finish" \| "wait" \| "process" \| "error"
[data-orientation]	"horizontal" \| "vertical"

StepsSeparator

Divider between steps.

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"

Examples

Set status on step

<Steps.Root currentStep={0}>
  <Steps.Step status="error">
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step01</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step02</div>
      <div>This is a description</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step03</div>
    </Steps.Content>
  </Steps.Step>
</Steps.Root>

Custom status via props.

function CustomStatusProps() {
  return (
    <Steps.Root currentStep={1}>
      <Steps.Step status="error">
        <Steps.Indicator>
          <Steps.Status finish={<UserIcon />} error={<UserIcon color="red" />} />
        </Steps.Indicator>
        <Steps.Content>
          <div>Step01</div>
        </Steps.Content>
        <Steps.Separator />
      </Steps.Step>

      <Steps.Step>
        <Steps.Indicator>
          <Steps.Status finish={<UserIcon />} error={<UserIcon color="red" />} />
        </Steps.Indicator>
        <Steps.Content>
          <div>Step02</div>
          <div>This is a description</div>
        </Steps.Content>
        <Steps.Separator />
      </Steps.Step>

      <Steps.Step>
        <Steps.Indicator>
          <Steps.Status wait={<UserIcon color="gray" />} />
        </Steps.Indicator>
        <Steps.Content>
          <div>Step03</div>
        </Steps.Content>
      </Steps.Step>
    </Steps.Root>
  );
}

render(<CustomStatusProps />);

function UserIcon() {
  return (
    <svg
      width="2em"
      height="2em"
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
    </svg>
  );
}

Custom status via function.

function CustomStatusFunc() {
  return (
    <Steps.Root currentStep={1}>
      <Steps.Step status="wait">
        <Steps.Indicator>
        {(status: StepStatusValue) =>
          status === 'wait' ? <UserIcon color="gray" /> : <UserIcon />
        }
        </Steps.Indicator>
        <Steps.Content>
          <div>Step01</div>
        </Steps.Content>
        <Steps.Separator />
      </Steps.Step>

      <Steps.Step>
        <Steps.Indicator>
          <Steps.Status />
        </Steps.Indicator>
        <Steps.Content>
          <div>Step02</div>
          <div>This is a description</div>
        </Steps.Content>
        <Steps.Separator />
      </Steps.Step>

      <Steps.Step>
        <Steps.Indicator>
          <Steps.Status />
        </Steps.Indicator>
        <Steps.Content>
          <div>Step03</div>
        </Steps.Content>
      </Steps.Step>
    </Steps.Root>
  );
}

render(<CustomStatusFunc />);

function UserIcon() {
  return (
    <svg
      width="2em"
      height="2em"
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
    </svg>
  );
}

Custom content via function.

<Steps.Root currentStep={1}>
  <Steps.Step status="finish">
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      {(status: StepStatusValue) =>
        status === 'finish' ? (
          <div>Step01 - {status}</div>
        ) : (
          <>
            <div>Step01 - {status}</div>
            <div>This is a description</div>
          </>
        )
      }
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step02</div>
      <div>This is a description</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step03</div>
    </Steps.Content>
  </Steps.Step>
</Steps.Root>

Custom content via function.

<Steps.Root orientation="vertical" currentStep={0}>
  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step01</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step02</div>
      <div>This is a description</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step03</div>
    </Steps.Content>
  </Steps.Step>
</Steps.Root>

Slider

Switch