feat(stepper): new stepper component

[damianricobelli]

Hi! In this opportunity I present a new component: Stepper.

The idea of this in its beginnings was to make it as modular and flexible as possible for development.

A basic example of the application is this:

const steps = [
  { label: "Step 1" },
  { label: "Step 2" },
  { label: "Step 3" },
] satisfies StepConfig[]

export const StepperDemo = () => {
  const {
    nextStep,
    prevStep,
    resetSteps,
    setStep,
    activeStep,
    isDisabledStep,
    isLastStep,
    isOptionalStep,
  } = useStepper({
    initialStep: 0,
    steps,
  })

  return (
    <>
      <Steps activeStep={activeStep}>
        {steps.map((step, index) => (
          <Step index={index} key={index} {...step}>
            <div className="bg-muted h-40 w-full p-4">
              <p>Step {index + 1} content</p>
            </div>
          </Step>
        ))}
      </Steps>
      <div className="flex items-center justify-end gap-2">
        {activeStep === steps.length ? (
          <>
            <h2>All steps completed!</h2>
            <Button onClick={resetSteps}>Reset</Button>
          </>
        ) : (
          <>
            <Button disabled={isDisabledStep} onClick={prevStep}>
              Prev
            </Button>
            <Button onClick={nextStep}>
              {isLastStep ? "Finish" : isOptionalStep ? "Skip" : "Next"}
            </Button>
          </>
        )}
      </div>
    </>
  )
}

Here is a complete video of the different use cases:

https://user-images.githubusercontent.com/22398603/236876155-5cafd5c4-5aea-41ab-aaf4-76e8b20a2eed.mov

[vercel[bot]]

@damianricobelli is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 17, 2024 7:14pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
next-template	⬜️ Ignored (Inspect)	Visit Preview		Apr 17, 2024 7:14pm

[jocarrd]

love it 👀

[shadcn]

This looks incredible @damianricobelli I'll review.

[its-monotype]

Looks amazing 😍 Unfortunately I don't have time to review and research about this component. However, look what I recently found: https://saas-ui.dev/docs/components/navigation/stepper.
https://github.com/saas-js/saas-ui/tree/main/packages/saas-ui-core/src/stepper

This can serve as reference to improve or borrow ideas to simplify the implementation. From what I can suggest it is to rename Step to StepperStep and useSteps to useStepper to comply with the general API conventions of the components and it will be more unique name to prevent conflicts.

[damianricobelli]

Looks amazing 😍 Unfortunately I don't have time to review and research about this component. However, look what I recently found: https://saas-ui.dev/docs/components/navigation/stepper. https://github.com/saas-js/saas-ui/tree/main/packages%2Fsaas-ui-stepper

This can serve as reference to improve or borrow ideas to simplify the implementation. From what I can suggest it is to rename Step to StepperStep and useSteps to useStepper to comply with the general API conventions of the components and it will be more unique name to prevent conflicts.

Thank you very much for your feedback! I'll be reviewing tomorrow what you just shared and your suggestions 🫶

[damianricobelli]

@shadcn What do you think about this component? Do you think we should adjust anything so that it can be launched on prod?

[destino92]

Is this is still in progress?

[damianricobelli]

Is this is still in progress?

@destino92 From my side the component is ready. Just need to know if @shadcn agrees to move forward and add it to the CLI that brings and details that you think are missing in terms of documentation.

[drewhoffer]

This looks good!

[dan5py]

Hi @damianricobelli, this component looks very good. Could you please update it to the new version (different themes, registry, docs, etc.)?

[damianricobelli]

@dan5py yes of course. Between today and Monday I will be making the necessary changes so that the component allows the last addition you mention.

[damianricobelli]

@shadcn Could you check this? I've already updated the code with all the latest stuff in the main branch. There are already several people watching the release of this component 🤩 🚀

[damianricobelli]

Hi @damianricobelli, this component looks very good. Could you please update it to the new version (different themes, registry, docs, etc.)?

Done @dan5py! 🥳

[FadiAboMsalam]

any update on this 🤔

[its-monotype]

@shadcn @dan5py Please review it, it must have components and huge work

[drewhoffer]

@its-monotype

@shadcn @dan5py Please review it, it must have components and huge work

You can always just fork what Damian has if you need it that urgently.

[Sparsh-Malhotra]

Any update on this ? @shadcn

[RamonEbneter]

@damianricobelli Amazing work! Thank you :)

[5hraddha]

@damianricobelli Nice work! Thanks! @shadcn Any update on when will this component be deployed and be available for use?

[KryptXBSA]

This is awesome, can it be used in vertical direction? EDIT: Yes!

[damianricobelli]

@SaadBazaz I have added the class you suggested and also added additionalClassName to the API to be able to add classes and configure the layout of the internal elements such as the buttons containing the step numbers, the label and the label description.

In addition, I extended the StepsProps interface to React.HTMLAttributes<HTMLDivElement> to allow adding props from the parent div.

Do you think it is ready to go into production?

[iamkhalidbashir]

Waiting for it...

[SaadBazaz]

@SaadBazaz I have added the class you suggested and also added additionalClassName to the API to be able to add classes and configure the layout of the internal elements such as the buttons containing the step numbers, the label and the label description.

In addition, I extended the StepsProps interface to React.HTMLAttributes to allow adding props from the parent div.

Do you think it is ready to go into production?

I think it's almost at par to most Stepper implementations out there.

What's most concerning to me:

1. Mobile responsiveness
2. Animations (see MUI's implementation, and see the transition animation in this shadcn/ui component)
3. Improvements of docs

I think mobile responsiveness can use some work. Here's how it looks like on my end:

[damianricobelli]

@SaadBazaz Perfect, I'll be working on it in the next few days

[shadcn]

@damianricobelli Happy to merge this when ready. Let me know.

[SaadBazaz]

@SaadBazaz Perfect, I'll be working on it in the next few days

Just had a brainfart: maybe Accordion component can be used as a base for the animation. https://ui.shadcn.com/docs/components/accordion

https://github.com/shadcn-ui/ui/assets/51885228/8b27faca-a201-4357-8caa-336e3e7a6205

Also, a nice observation: it seems like even the docs have their own "Stepper" 😁 Hope this new component can replace it!

[pappijx]

Thank you @Sparsh-Malhotra awesome work

[guifeliper]

Any update here? @damianricobelli @shadcn

[brandonmcconnell]

Just came here to open an issue for the same component. Glad to see this one is already in the works.

Eagerly awaiting it 🙂