# Onboarding checklist

> A setup checklist with progress ring and inline actions.

Block · Free · https://lodeui.com/blocks/onboarding-checklist

## When to use

- First-run setup in a SaaS dashboard.

## When not to use

- Linear forms: use a stepper.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/onboarding-checklist.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { OnboardingChecklist } from "@/components/blocks/onboarding-checklist";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <OnboardingChecklist />
    </main>
  );
}
```

Built from: Action button, Progress

## API reference

### OnboardingChecklist

Five setup steps with a progress ring, inline actions per step and a completion state. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between steps and actions |
| Enter / Space | Expand a step or run its action |

## Accessibility

- Steps are buttons with aria-expanded.
- Progress is a labelled progressbar.

## Motion

- Completed steps check off and the ring fills.

## Responsive behavior

- Single column at every width.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Persist completed steps on your server so the list survives reloads.

## Related

- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [Stepper](https://lodeui.com/components/stepper) — Horizontal or vertical steps with animated progress and back-navigation.