rc-steps

Basic Step Indicator

This code sample demonstrates how to create a basic step indicator with three steps, where the second step is marked as the current step. Each step has a title and a description.

import React from 'react';
import Steps, { Step } from 'rc-steps';

const BasicSteps = () => (
  <Steps current={1}>
    <Step title='Step 1' description='This is a description.' />
    <Step title='Step 2' description='This is a description.' />
    <Step title='Step 3' description='This is a description.' />
  </Steps>
);

export default BasicSteps;

Vertical Step Indicator

This example shows how to set up a vertical step indicator. The steps are arranged vertically, and the current step is highlighted.

import React from 'react';
import Steps, { Step } from 'rc-steps';

const VerticalSteps = () => (
  <Steps direction='vertical' current={1}>
    <Step title='Step 1' description='This is a description for step 1.' />
    <Step title='Step 2' description='This is a description for step 2.' />
    <Step title='Step 3' description='This is a description for step 3.' />
  </Steps>
);

export default VerticalSteps;