Steps

Shows progress through a multi-step flow.

$ pnpm dlx shadcn@latest add https://multidash-app.vercel.app/r/steps.json

  1. Account (completed)

    Your details

  2. 2

    Store

    Name & currency

  3. 3

    Payments

    Connect provider

  4. 4

    Launch

    Go live

Installation

Add Steps with the shadcn CLI, or copy the source by hand. In this repo there's nothing to install — import it from @multidash/ui.

$ pnpm dlx shadcn@latest add https://multidash-app.vercel.app/r/steps.json

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

components.json
{
  "registries": {
    "@multidash": "https://multidash-app.vercel.app/r/{name}.json"
  }
}

Then add components by name:

$ pnpm dlx shadcn@latest add @multidash/steps

Usage

import {
  Steps,
  Step,
} from "@multidash/ui/components/steps"

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