Horizontal Step Tracker

Migration

Export
Map fields
3
Review
4
Go live
About this piece

Horizontal Step Tracker

A horizontal progress card with numbered nodes joined by connectors, marking finished, current, and upcoming steps.

Usage

The import and the props worth knowing about, in one place.

import { Progress16 } from "@/components/beste/piece/progress16";

<Progress16
  surface="card"
  bordered={false}
  inverted={false}
  title="Migration"
  steps={[
    "Export",
    "Map fields",
    "Review",
    "Go live"
  ]}
  activeIndex={2}
/>

More Progress pieces

View all Progress
Account
Plan
3
Payment
4
Done
27Day streak

Clinic setup

2/4
Create your workspace
Import member records
Invite your team
Publish booking page
Deployment68%
Storage breakdown
  • Media53%
  • Docs23%
  • Cache15%
  • Other10%