Onboarding Checklist

import { Checklist, ChecklistItem, Button } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="max-w-md w-full">
      <Checklist
        title="Getting started"
        description="Finish setup to unlock the full workspace."
      >
        <ChecklistItem
          id="invite"
          title="Invite your teammates"
          description="Add at least one collaborator to your workspace."
          action={<Button size="sm" variant="outline">Invite</Button>}
        />
        <ChecklistItem
          id="connect"
          title="Connect a GitHub repo"
          description="Sync issues and PRs automatically."
          action={<Button size="sm" variant="outline">Connect</Button>}
        />
        <ChecklistItem
          id="key"
          title="Add an API key"
          description="So Claude can ship code on your behalf."
          action={<Button size="sm" variant="outline">Add</Button>}
        />
        <ChecklistItem
          id="deploy"
          title="Deploy to production"
          description="Go live with a single click."
          action={<Button size="sm">Deploy</Button>}
        />
      </Checklist>
    </div>
  )
}