Pre-styled checklist components with shadcn/ui patterns: Checklist, ChecklistTask, ChecklistProgress, and ChecklistLauncher

Components

Pre-built, accessible checklist components styled with Tailwind CSS and CVA variants.

Available Components

Checklist

Main checklist container with header and progress

ChecklistTask

Individual task item with checkbox and state indicators

ChecklistProgress

Progress bar with percentage and count display

ChecklistLauncher

Floating button to show/hide checklist panel

ChecklistPanel

Floating panel container for checklists

Quick Example

import {
  ChecklistProvider,
  Checklist,
  ChecklistTask,
  ChecklistProgress,
} from '@tour-kit/checklists';

const checklist = {
  id: 'onboarding',
  title: 'Get Started',
  tasks: [
    { id: 'step1', title: 'Create account' },
    { id: 'step2', title: 'Verify email' },
    { id: 'step3', title: 'Complete profile' },
  ],
};

function App() {
  return (
    <ChecklistProvider checklists={[checklist]}>
      <Checklist
        checklistId="onboarding"
        showHeader
        showProgress
      />
    </ChecklistProvider>
  );
}

Styling

All components support:

CVA variants for consistent styling
Tailwind CSS classes via className prop
asChild pattern for composition (Radix/Base UI compatible)

Variant System

<Checklist variant="default" size="default" />
<ChecklistTask variant="default" size="sm" />
<ChecklistProgress variant="default" showPercentage />

Composition

Components are designed to be composed together:

<ChecklistPanel checklistId="onboarding">
  <Checklist checklistId="onboarding">
    <ChecklistProgress />
    <ChecklistTask taskId="step1" />
    <ChecklistTask taskId="step2" />
  </Checklist>
</ChecklistPanel>

Accessibility

All components follow WCAG 2.1 AA guidelines:

Proper ARIA labels and roles
Keyboard navigation
Focus management
Screen reader announcements

Headless Components - Build custom UI
Hooks - Programmatic control