Steps Component

ℹ️

A customizable React component for displaying steps or a process indicator.

Example Preview

Steps Example

ℹ️

Note: The preview image above is just an example. The component is fully customizable and can be styled however you want.

Usage

ℹ️

Import the Steps component in your React application and use it as follows:

import React from "react";
import { Steps } from "@/@core";
 
const YourComponent = () => {
  // Your data for the steps
  const stepsData = [
    { text: "Step 1", icon: "⛳", color: "primary" },
    { text: "Step 2", icon: "", color: "primary" },
    { text: "Step 3", icon: "", color: "accent" },
    { text: "Step 4", icon: "", color: "accent" },
    { text: "Step 5", icon: "⭐", color: null },
    { text: "Step 6", icon: "✅", color: "success" },
  ];
 
  return (
    <div>
      <h2>Your Component Title</h2>
      <Steps data={stepsData} position="horizontal" />
    </div>
  );
};
 
export default YourComponent;

Props

Name	Type	Default	Description
`data`	`StepsItemProps[]`	`[]`	An array of objects representing each step.
`position`	`horizontal`	`vertical`, `horizontal`	Specifies the position of the steps. Use either `horizontal` or `vertical`.
`color`	`string`	null	Custom color to be applied to all steps.
`className`	`string`		Additional CSS class names to be applied to the component.
`...props`	`HTMLAttributes`		Additional HTML attributes to be applied to the component.

Default Props

You can customize default props in the defaultData object exported from the component file.

ℹ️

Note: The Steps component is a versatile React component designed to create a step-by-step visual representation, making it useful for guiding users through a process. It supports customization of step labels, icons, and styles. This component is inspired by the DaisyUI (opens in a new tab) framework's design for step navigation. Check it out for more awesome components.

Skeleton Table