Stepper

A visual indicator for multi-step processes.

Enter your email below to create your account.

Installation

Run the following command to install the `stepper` components:

npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/stepper.json

Read-only

Use the component without the Trigger wrapper to create status displays or tracking timelines.

Estimated Delivery: Aug 16

Shipped

Order Placed Mon, Aug 12

Processing Tue, Aug 13

Shipped Wed, Aug 14

Delivered Expected Fri, Aug 16

Vertical Orientation

Use the orientation="vertical" prop. The components will automatically adjust their layout and separator alignment.

Customization

You can customize the Indicator content using snippets.

A visual indicator for multi-step processes.

Item	Key	Value	Default
Root component Container that provides stepper state and layout



Item component Wraps a single step and exposes step state


Trigger component Interactive control that activates a step



Indicator component Visual circle showing step state



Separator component Connector line between steps
Title component Step title text
Title component Step title text
Description component Step description text
Description component Step description text