OnboardingSteps

Linear stepper with always-visible cards, a progress bar, and an action button on the active step. Ideal for first-run wizards, module install flows, and unconfigured-module landing pages.

Import

import { OnboardingSteps } from "@repo/design-system/components/onboarding/onboarding-steps";

Basic

Set up your workspace

Complete these steps to get your team up and running.

0 of 4 completed
1

Create your workspace

Name your workspace and pick a URL. This is where your team will collaborate.

2

Invite your team

Add teammates by email so everyone can collaborate in real time across projects.

3

Set up your first project

Create a project to organize tasks, docs, and milestones in one place.

4

Connect your tools

Link Slack, GitHub, or Figma to keep your workflow in sync automatically.

With locked / blocked steps

Install Online Join

A few items need to be configured before this module can go live.

0 of 3 completed
1

Create at least one location

Online Join requires a location to attach membership plans to.

No locations exist. Open Structure to add one before continuing.

2

Publish a membership plan

Create at least one membership plan and mark it active.

3

Connect a public site

Map a domain or subdomain so the public funnel can be reached.

Custom progress label

Module configuration

0/4 sections configured
1

Create your workspace

Name your workspace and pick a URL. This is where your team will collaborate.

2

Invite your team

Add teammates by email so everyone can collaborate in real time across projects.

3

Set up your first project

Create a project to organize tasks, docs, and milestones in one place.

4

Connect your tools

Link Slack, GitHub, or Figma to keep your workflow in sync automatically.

All complete

Workspace ready

All setup steps are complete. Keep these as a checklist for new admins.

All done
Your workspace is configured. Members invited after this point will skip onboarding.

Create your workspace

Name your workspace and pick a URL. This is where your team will collaborate.

Invite your team

Add teammates by email so everyone can collaborate in real time across projects.

Set up your first project

Create a project to organize tasks, docs, and milestones in one place.

Connect your tools

Link Slack, GitHub, or Figma to keep your workflow in sync automatically.