ChecklistProgress component: visual progress bar with percentage, completed count, and animated fill for task completion

ChecklistProgress

Progress bar component that displays completion progress with optional percentage and count.

Usage

import { ChecklistProgress, useChecklist } from '@tour-kit/checklists';

function Progress() {
  const { progress } = useChecklist('onboarding');

  return (
    <ChecklistProgress
      value={progress.completed}
      max={progress.total}
      showPercentage
    />
  );
}

Props

Prop

Type

Examples

Basic Progress

const { progress } = useChecklist('onboarding');

<ChecklistProgress
  value={progress.completed}
  max={progress.total}
/>

With Percentage

<ChecklistProgress
  value={3}
  max={5}
  showPercentage
/>
// Shows "60%"

With Count

<ChecklistProgress
  value={3}
  max={5}
  showCount
/>
// Shows "3/5"

Both Percentage and Count

<ChecklistProgress
  value={3}
  max={5}
  showPercentage
  showCount
/>
// Shows "3/5 (60%)"

Custom Styling

<ChecklistProgress
  value={progress.completed}
  max={progress.total}
  variant="thick"
  barClassName="bg-gradient-to-r from-blue-500 to-purple-500"
/>

Variants

<ChecklistProgress value={3} max={5} variant="thin" />
<ChecklistProgress value={3} max={5} variant="default" />
<ChecklistProgress value={3} max={5} variant="thick" />

useChecklist - Access progress data
useChecklistsProgress - Multi-checklist progress

ChecklistProgress

On this page