Welcome UI logo

Stepper

The Stepper component is a user interface element that guides users through a multi-step process or workflow. It visually represents the sequence of steps involved, allowing users to easily navigate between them. Each step can be marked as completed or open, providing clear feedback on the user's progress. This component is particularly useful in forms, onboarding processes, and any scenario where tasks need to be broken down into manageable stages.

Source
OverviewProps
import React from 'react'


import { Stepper } from 'welcome-ui/Stepper'


const Example = () => {
  const [activeStep, setActiveStep] = React.useState(1)


  return (
    <Stepper>
      <Stepper.Item isCompleted isOpen={activeStep === 0} onClick={() => setActiveStep(0)}>
        Step 1
      </Stepper.Item>
      <Stepper.Separator />
      <Stepper.Item isOpen={activeStep === 1} onClick={() => setActiveStep(1)}>
        Step 2
      </Stepper.Item>
      <Stepper.Separator />
      <Stepper.Item isOpen={activeStep === 2} onClick={() => setActiveStep(2)}>
        Step 3
      </Stepper.Item>
    </Stepper>
  )
}


export default Example

Examples

Stepper.Item

Use the Stepper.Item component to define each individual step within the Stepper. Each item can represent a distinct stage in the process, and you can customize its appearance based on properties isCompleted prop to display a checked icon for completed steps, and the isOpen prop to show an open folder icon for steps that are currently being worked on.

Stepper.Separator

The Stepper.Separator component is used to visually separate individual steps within the Stepper. It helps to enhance the clarity of the step sequence by providing a distinct division between each step.

Stepper Responsive

The Stepper component automatically adapts to different screen sizes and container widths. When the content exceeds the available space, it becomes horizontally scrollable with smooth fade effects on the edges, ensuring all steps remain accessible while maintaining a clean visual appearance.

PaginationTabs