Headless Components

Headless checklist components: unstyled primitives with render props for building custom checklist and task UIs

Headless components provide all the logic and state management without any styling, giving you complete control over the UI.

Why Headless?

Use headless components when you need:

Complete control over markup and styling
Integration with existing design systems
Custom interactions not supported by styled components
Maximum flexibility

Available Components

ChecklistHeadless

Headless checklist with render props

TaskHeadless

Headless task with render props

Quick Example

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

<ChecklistHeadless checklistId="onboarding">
  {({ checklist, visibleTasks, completeTask }) => (
    <div className="my-custom-checklist">
      <h2>{checklist.config.title}</h2>
      {visibleTasks.map((task) => (
        <button
          key={task.config.id}
          onClick={() => completeTask(task.config.id)}
        >
          {task.completed ? '✓' : '○'} {task.config.title}
        </button>
      ))}
    </div>
  )}
</ChecklistHeadless>

Pattern Options

Render Prop

<ChecklistHeadless
  checklistId="onboarding"
  render={(props) => <YourUI {...props} />}
/>

Children Function

<ChecklistHeadless checklistId="onboarding">
  {(props) => <YourUI {...props} />}
</ChecklistHeadless>

Components - Pre-styled components
Hooks - Direct hook usage