Feedback, new

Onboarding Checklist

A workspace checklist with drawing checks, a spring progress ring, asynchronous actions and a shared-surface collapse into a completion pill.

$149 once · every Pro piece

Customize

Step count

Start at step

Install

npx shadcn@latest add @obsyde/onboarding-checklist

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { OnboardingChecklist } from '@/components/obsyde/ember/onboarding-checklist/OnboardingChecklist';

export function Example() {
  return (
    <OnboardingChecklist />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/onboarding-checklist/OnboardingChecklist.tsxcomponent
ember/onboarding-checklist/onboarding-checklist.cssstyles
ember/onboarding-checklist/OnboardingChecklistDemo.tsxdemo
ember/tactile-kit/kit.tsshared
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/rolling-number.cssshared
ember/shared/RollingNumber.tsxshared
ember/kit2-kit/kit.tsshared
ember/blocks-kit/check.cssshared
ember/blocks-kit/SparkBurst.tsshared
ember/blocks-kit/Check.tsxshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`stepCount`Step count	`number`	`5`
`startAt`Start at step	`number`	`1`