Step

The Step component is used to display a step in a process or a workflow. It pairs a label with content, ideal for creating guided, step-by-step user experiences.

Usage

Step Component Usage

import React from 'react';
import { Step } from '~/ui/components/Step';

export default function App() {
  return (
    <div>
      <Step label="1">
        This is the first step of the process
      </Step>
      <Step label="2">
        Here's what you need to do for the second step.
      </Step>
    </div>
  );
}

Rendered Example

Begin your journey here

Continue to the next part.

Props

Name	Type	Default	Description
label	string	`undefined`	Label for the step, typically a number or short identifier
children	ReactNode	`undefined`	Content of the step, can be text or other React elements