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 free while you build. Every package works unlicensed in development, a one-time licence from $9.99 removes the production watermark when you ship.
Free in development, 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