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
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>Related
- Components - Pre-styled components
- Hooks - Direct hook usage
Ship onboarding, not config.
npm i @tour-kit/core is MIT and free. The Pro packages work unlicensed too — a one-time $99 license removes the production watermark when you ship.
MIT-licensed — no signup, no credit card. Pay once, only when you ship.
Variants
CVA variant exports for @tour-kit/checklists — checklistVariants, checklistTaskVariants, checklistProgressVariants, checklistLauncherVariants, checklistPanelVariants, and the full styling surface
ChecklistHeadless
HeadlessChecklist component: unstyled checklist container exposing tasks, progress, and actions via render props