Stepper

The Stepper component is a customizable React component that allows you to create a step-by-step user interface for guiding users through a process or workflow. It can be used to represent a multi-step form, a progress tracker, or any scenario where sequential navigation is required.

Author

• @author VasanthRaj [email protected]

Link

Story Book Link stepper

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_vertical-stepper-tab

Import component

import { Stepper } from '@licuido-ui/ui_vertical-stepper-tab';

Usage

<VerticalStepperTab
  steps={steps}
  activeStep={activeStep}
  icon={<ClickIcon />}
  indicatorHeight={'10px'}
  indicatorWidth={'10px'}
  stepIconHeight={'40px'}
/>

Image

Sample Code

<VerticalStepperTab
  steps={steps}
  activeStep={activeStep}
  icon={<ClickIcon />}
  indicatorHeight={'10px'}
  indicatorWidth={'10px'}
  stepIconHeight={'40px'}
/>

Props

| Name | Description | Default | Control | | --------------- | -------------- | ------- | ------------ | | | | string | | | steps | StepData[] | [] | string[] | | icon | Reactelement | { } | Reactelement | | indicatorStyle | SxProps | - | SxProps | | activeStep | number | 0 | number | | labelStyle | SxProps | - | SxProps | | sx | SxProps | - | SxProps | | stepIconStyle | SxProps | - | SxProps | | indicatorHeight | an | 0 | number | | indicatorWidth | any | 0 | number | | stepIconHeight | any | 0 | number |