Stepper

A stepper to indicate the user's progress through a multi-step process or form.

Installation

npx ever-ui-clx@0.2.1 add demo-stepper

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
        "collapsible-down": {
          from: { height: "0" },
          to: { height: "var(--radix-collapsible-content-height)" },
        },
        "collapsible-up": {
          from: { height: "var(--radix-collapsible-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "collapsible-down": "collapsible-down 0.2s ease-out",
        "collapsible-up": "collapsible-up 0.2s ease-out",
      },
    },
  },
};

Examples

1. Orientation

By using the orientation prop you are able to switch between horizontal (default) and vertical orientations. By default, when in mobile view the Steps component will switch to vertical orientation. You are also able to customize the breakpoint at which the component switches to vertical orientation by using the mobileBreakpoint prop.

2. Optionnal Steps

The second step is optional and can be skipped by the user.

3. Variants

You can change the style of the stepper by passing the variant prop

4. State

Sometimes it is useful to display visual feedback to the user depending on some asynchronous logic. In this case we can use the state prop to display a loading or error indicator with the values of loading | error. This prop can be used globally within the Stepper component or locally in the Step component affected by this state.

5. Custom Icons

If you want to show custom icons instead of the default numerical indicators, you can do so by using the icon prop on the Step component. To change the general check and error icons, we can use the checkIcon and errorIcon prop inside the Stepper component

6. Scroll Tracking

If you would like the stepper to scroll to the active step when it is not in view you can do so using the scrollTracking prop on the Stepper component.

For scroll tracking to make sense, the content of each step should ideally include the buttons that allow the user to move forward or backward in the stepper, since the user should be able to see the content of the active step and not need to scroll to the end of the stepper in order to move forward or backward.

7. With Forms

If you want to use the stepper with forms, you can do so by using the useStepper hook to control the component. This example uses the Form component of shadcn and the react-hook-form hooks to create a form with zod for validations. You can also use the component with server actions.

8. Clickable Steps

9. Footer inside Step

Usage