Dashral Pro is on the wayGet 30% off at launch

Dashral

Steps

Shows progress through a multi-step flow.

$ pnpm dlx shadcn@latest add https://dashral.com/r/steps.json

  1. Account (completed)

    Your details

  2. 2

    Store

    Name & currency

  3. 3

    Payments

    Connect provider

  4. 4

    Launch

    Go live

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/steps.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json
{
  "registries": {
    "@dashral": "https://dashral.com/r/{name}.json"
  }
}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/steps

Usage

example.tsx
import { Steps } from "@/components/dashral/steps"

<Steps items={[{ title: "Account" }, { title: "Workspace" }, { title: "Invite your team" }]} current={1} />

Examples

Vertical

Great for order tracking.

  1. Order placed (completed)

    Oct 7, 09:12

  2. Payment confirmed (completed)

    Oct 7, 09:15

  3. 3

    Packed

    Preparing your order

  4. 4

    Shipped

  5. 5

    Delivered

Checkout

Each step checks its fields before moving on; Back keeps what you typed; the last step places the order.

  1. 1

    Shipping

    Where it goes

  2. 2

    Delivery

    How fast

  3. 3

    Payment

    Card details

API reference

Steps

Also takes every prop of <ol>(opens in a new tab).

PropTypeDefault
items{ title, description? }[]

The steps, in order. Required.

—
currentnumber

Zero-based index of the current step. Required.

—
orientation"horizontal" | "vertical""horizontal"

Accessibility

  • An ordered list; the current step has aria-current="step" and completed steps say “(completed)”.

Motion

  • When a step is done, its connector fills in the reading direction and the check springs in; circles change color smoothly.