Components•Onboarding stages

Onboarding stages

A progress card for onboarding, launch checklists, and account setup flows. The component supports theme presets, size variants, motion timing, and button callbacks without requiring a separate wrapper.

Dependencies

Motion Lucide clsx

Copy below cli

npx shadcn add @bjork-ui/onboarding-stages

How to use

import { OnboardingStages } from "@/components/bjork-ui/cards/onboarding-stages";export function Demo() {  return (    <OnboardingStages      theme="orange"      variant="expanded"      percentage={65}      buttonText="Continue Setup"      onButtonClick={() => console.log("continue")}    />  );}

ONBOARDING

STAGE 1

Completed

Define your brand mission

Upload your brand logo

Select your brand colors

STAGE 2

To Do

Connect your social media accounts

Add your first product/service

Set up your payment methods

Configure your shipping options