Checklist component: main container rendering tasks with progress header, completion state, and configurable layout options

Checklist

The main container component that displays a complete checklist with tasks, header, and progress.

Usage

import { Checklist } from '@tour-kit/checklists';

<Checklist
  checklistId="onboarding"
  showHeader
  showProgress
/>

Props

Prop

Type

Examples

Basic Checklist

<Checklist checklistId="onboarding" />

With Custom Styling

<Checklist
  checklistId="onboarding"
  variant="card"
  size="lg"
  className="shadow-lg"
/>

Custom Task Rendering

<Checklist
  checklistId="onboarding"
  renderTask={(task, { execute, toggle }) => (
    <div className="custom-task">
      <input type="checkbox" checked={task.completed} onChange={toggle} />
      <span>{task.config.title}</span>
      {task.config.action && (
        <button onClick={execute}>Start</button>
      )}
    </div>
  )}
/>

Compact Mode

<Checklist
  checklistId="onboarding"
  variant="compact"
  showHeader={false}
  showProgress={false}
/>

ChecklistTask - Individual task component
ChecklistProgress - Progress bar
useChecklist - Checklist hook

Checklist

On this page