ComponentsCore
Stepper
A multi-step navigation component that guides users through a sequence of steps or actions.
Example
Usage
Installation
Required Component
This component depends on Loader. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install @radix-ui/react-slot react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add stepperAnatomy
import { Stepper } from "@/components/ui/core/stepper";
import {
StepperRoot,
StepperItem,
StepperTrigger,
StepperIndicator,
StepperTitle,
StepperDescription,
StepperSeparator,
StepperContent,
StepperItems,
} from "@/components/ui/core/stepper";<Stepper steps={steps} activeStep={step} onStepChange={setStep} />
/* Or */
<StepperRoot>
<StepperItems>
<StepperItem>
<StepperTrigger>
<StepperIndicator />
<div>
<StepperTitle>{title}</StepperTitle>
<StepperDescription>{description}</StepperDescription>
</div>
</StepperTrigger>
<StepperSeparator />
</StepperItem>
</StepperItems>
</StepperRoot>Another Examples
Vertical
You can display the stepper vertically instead of horizontally. This layout is useful when you have limited horizontal space or want to create a more structured, top-to-bottom flow for multi-step processes.
Usage
Animated
Add smooth animations between steps to create a more engaging and dynamic user experience. Transitions help users understand progress changes and make navigation between steps feel more natural.
Usage
Props
Loading types…