Skip to content
DOL Studio

Steps

Design: Stable Code: Coded navwizardprogress 6 Figma sets Steps / Item / Progress

Live preview

Horizontal (default) — success-green progression
  1. 1
    Account
    Email · password
  2. 2
    Profile
    Name · avatar
  3. 3
    Subscription
    Plan tier
  4. 4
    Payment
    Card · billing
Horizontal · variant=check (done shows ✓)
  1. Account
    Email · password
  2. Profile
    Name · avatar
  3. 3
    Subscription
    Plan tier
  4. 4
    Payment
    Card · billing
Vertical · sm
  1. Account
    Email · password
  2. 2
    Profile
    Name · avatar
  3. 3
    Subscription
    Plan tier
  4. 4
    Payment
    Card · billing
Error state — per-item status
  1. Account
    Verified
  2. Profile
    Saved
  3. Payment
    Card declined
  4. 4
    Confirm
    —

Import & files

Import
import { Steps } from "@dol/ui/steps";
Source file
packages/@dol/ui/src/steps/Steps.tsx

Figma source

Figma source 6 sets
Page
Steps
Sets
6
Primary set
Steps / Item / Progress · 15 variants Open in Figma →
Showing: Steps / Item / Progress
5 other sets
  • Element/Process line 6 variants Figma →
  • Element/Step icon 2 variants Figma →
  • Element/Step number label 24 variants Figma →
  • Process bar with step (Sample) 6 variants Figma →
  • Steps / Item / Tail 2 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Steps
Slug: `steps`
Domain: general · Category: navigation
Design: stable · Code: coded


## Description
Wizard / multi-step indicator - process line, step icon, step number label.


## Import
```ts
import { Steps } from "@dol/ui/steps";
```
Source: `packages/@dol/ui/src/steps/Steps.tsx`


## Figma source
Page: Steps
Sets: 6
Primary: Steps / Item / Progress
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=3402-43249

Related

  • L
    lms

    LMS Role Sidebar

    Design only
  • Pressed

    Tabbar, Toggle

    Coded
  • S
    nav

    Sidebar

    Coded

  • Pagination

    Coded
  • HomeSectionCurrent

    Breadcrumb

    Coded
  • Nav item

    NavItem

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).