@licuido-ui/ui_responsive-stepper

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 Vasanth Raj [e-mail]

Link

Story Book Link stepper

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_responsive-stepper

Import component

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

Usage

  <ResponsiveStepper
        variant='vertical'
        steps={steps}
        icons={icons}
        activeStep={activeStep}
        labelPositionStyle={{ top: 19 }}
      /> />

Image

Sample Code

<ResponsiveStepper
  variant='vertical'
  steps={steps}
  icons={icons}
  activeStep={activeStep}
  labelPositionStyle={{ top: 19 }}
/>

Props

Name	Description	Default	Control
variant	string	string	string
steps	StepData[]	[]	string[]
icons	ReactElement	{ }	ReactElement
activeStep	number	[]	number
activeLineStyle	SxProps	0	SxProps
className	string	-	string
sx	SxProps	-	SxProps
completedLineStyle	SxProps	-	SxProps
lineStyle	SxProps	-	SxProps
labelStyle	SxProps	-	SxProps
stepIconStyle	SxProps	-	SxProps
activeStepIconStyle	SxProps	-	SxProps
completedStepIconStyle	SxProps	-	SxProps
connectorOverAllStyle	SxProps	-	SxProps