uix-uiStepper
Progress steps. 4 statuses.
- Cart3 items
- 2AddressWhere to?
- 3PaymentbKash or card
import { Step, Stepper } from "@/components/ui/stepper";
export default function Example() {
return (
<Stepper>
<Step status="complete" title="Cart" description="3 items" />
<Step status="current" index={2} title="Address" description="Where to?" />
<Step status="upcoming" index={3} title="Payment" description="bKash or card" />
</Stepper>
);
}
Installation
$ npx uix-ui@latest add stepperThis copies the file into components/ui/stepper.tsx in your project. npx shadcn@latest add @uix/stepper works too.
Usage
import { Stepper, Step } from "@/components/ui/stepper";
<Stepper>
<Step status="complete" title="Cart" description="3 items" />
<Step status="current" index={2} title="Address" description="Where to?" />
<Step status="upcoming" index={3} title="Payment" description="bKash or card" />
</Stepper>
Examples
Moving through steps
- Cart
- 2Address
- 3Payment
- 4Done
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Step, Stepper } from "@/components/ui/stepper";
export default function Example() {
const [step, setStep] = React.useState(2);
const steps = ["Cart", "Address", "Payment", "Done"];
return (
<div style={{ display: "grid", gap: 20 }}>
<Stepper>
{steps.map((s, i) => <Step key={s} index={i + 1} title={s} status={i + 1 < step ? "complete" : i + 1 === step ? "current" : "upcoming"} />)}
</Stepper>
<div className="flex gap-2">
<Button size="sm" variant="outline" disabled={step === 1} onClick={() => setStep(step - 1)}>Back</Button>
<Button size="sm" disabled={step === 5} onClick={() => setStep(step + 1)}>Next</Button>
</div>
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | complete | current | upcoming | error | "complete" | |
index | number | – | Number shown in the circle while the step is current, upcoming or in error. |
title | React.ReactNode | – | |
description | React.ReactNode | – |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx
This file exports 2 parts: Stepper, Step. Use only the ones you need.