TourKit
@tour-kit/checklistsComponents

ChecklistLauncher

ChecklistLauncher component: floating action button to toggle checklist panel visibility with badge showing remaining tasks

ChecklistLauncher

A floating action button that toggles the visibility of a checklist panel. Shows progress indicator.

Usage

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

<ChecklistLauncher checklistId="onboarding" />

Props

Prop

Type

Examples

Basic Launcher

<ChecklistLauncher checklistId="onboarding" />

Different Positions

<ChecklistLauncher checklistId="onboarding" position="bottom-left" />
<ChecklistLauncher checklistId="onboarding" position="top-right" />

Custom Icon

import { CheckSquare } from 'lucide-react';

<ChecklistLauncher
  checklistId="onboarding"
  icon={<CheckSquare />}
/>

Without Badge

<ChecklistLauncher
  checklistId="onboarding"
  showBadge={false}
/>

Styled Variants

<ChecklistLauncher checklistId="onboarding" variant="outline" />
<ChecklistLauncher checklistId="onboarding" variant="ghost" />

Progress Badge

The launcher automatically shows:

  • Number of completed tasks (e.g., "3/5")
  • Completion checkmark when done
  • Pulsing animation for incomplete checklists

ChecklistProgress

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

ChecklistPanel

ChecklistPanel component: floating side panel container with slide-in animation for persistent checklist access

On this page

ChecklistLauncherUsagePropsExamplesBasic LauncherDifferent PositionsCustom IconWithout BadgeStyled VariantsProgress BadgeRelated