Hudoro stepper

Hudoro stepper is a strict and customizable stepper component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/stepper

Instal package using yarn

  yarn add @hudoro/stepper

Instal package using npm

  npm i @hudoro/stepper

Usage/Examples

import React from "react";
import {Stepper, Step} from "@hudoro/stepper";
import ReactDOM from "react-dom/client";

const App = () => (
  <div>
    <h1>Stepper Component</h1>
    <Stepper orientation="horizontal" active={1}>
      <Step title="title" description="description" />
      <Step title="title1" description="description1" />
      <Step title="title2" description="descriptio2" />
    </Stepper>
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/stepper

Props that you can pass to <Stepper {...props} />

Prop Name	Value	required
orientation	"horizontal" / "vertical"	false
children	ReactNode	true
active	number	true

Props that you can pass to <Step {...props} />

Prop Name	Value	required
title	string	true
description	string	true