Stepper

Stepper

Displays a Stepper or a component that looks like a Stepper.
1
First

Contact Info

2
Second

Date & Time

3
Third

Select Rooms

Installation

npx react-nex add Stepper

Example

Vertical Stepper

First

Contact Info

Second

Date & Time

3
Third

Select Rooms


Props

index

  • Type: number
  • Description: The current active step index.

orientation

  • Type: string
  • Description: Determines the orientation of the stepper, can be horizontal or vertical.

useSteps

  • Type: function
  • Description: A hook to manage the state and logic for the stepper.

Step

Step

  • Description: Represents an individual step in the Stepper.

StepTitle

  • Type: ReactNode
  • Description: The title of the step.

StepDescription

  • Type: ReactNode
  • Description: The description of the step.

StepSeparator

  • Description: A visual separator between steps.

goToNext

  • Type: function
  • Description: Function to navigate to the next step.

goToPrevious

  • Type: function
  • Description: Function to navigate to the previous step.

StepIcon

  • Description: Component to display a check icon for completed steps.

StepStatus

  • Type: function
  • Description: Function to display the status of the step.
SkeletonSwitch