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

ChecklistPanel

A floating panel that contains a checklist. Works with ChecklistLauncher for show/hide functionality.

Usage

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

<>
  <ChecklistPanel checklistId="onboarding">
    {/* Checklist content */}
  </ChecklistPanel>

  <ChecklistLauncher checklistId="onboarding" />
</>

Props

Prop

Type

Examples

Basic Panel

<ChecklistPanel checklistId="onboarding">
  <Checklist checklistId="onboarding" />
</ChecklistPanel>

Different Positions

<ChecklistPanel checklistId="onboarding" position="bottom-left">
  <Checklist checklistId="onboarding" />
</ChecklistPanel>

With Launcher

<>
  <ChecklistPanel checklistId="onboarding">
    <Checklist checklistId="onboarding" />
  </ChecklistPanel>

  <ChecklistLauncher checklistId="onboarding" />
</>

Non-Collapsible

<ChecklistPanel
  checklistId="onboarding"
  collapsible={false}
  showCloseButton={false}
>
  <Checklist checklistId="onboarding" />
</ChecklistPanel>

Custom Content

<ChecklistPanel checklistId="onboarding">
  <div className="p-4">
    <h3>Welcome!</h3>
    <Checklist checklistId="onboarding" showHeader={false} />
    <button>Need help?</button>
  </div>
</ChecklistPanel>

Variants

<ChecklistPanel variant="bordered" checklistId="onboarding">
  <Checklist checklistId="onboarding" />
</ChecklistPanel>

<ChecklistPanel variant="shadowed" size="lg" checklistId="onboarding">
  <Checklist checklistId="onboarding" />
</ChecklistPanel>

Complete Example

import {
  ChecklistProvider,
  ChecklistPanel,
  ChecklistLauncher,
  Checklist,
} from '@tour-kit/checklists';

const checklist = {
  id: 'onboarding',
  title: 'Get Started',
  tasks: [
    { id: 'step1', title: 'Create account' },
    { id: 'step2', title: 'Add profile' },
    { id: 'step3', title: 'Invite team' },
  ],
};

function App() {
  return (
    <ChecklistProvider checklists={[checklist]}>
      <YourApp />

      <ChecklistPanel
        checklistId="onboarding"
        position="bottom-right"
      >
        <Checklist checklistId="onboarding" />
      </ChecklistPanel>

      <ChecklistLauncher
        checklistId="onboarding"
        position="bottom-right"
      />
    </ChecklistProvider>
  );
}

Behavior

Panel expands/collapses based on isExpanded state
Automatically positions itself based on position prop
Integrates with launcher for coordinated show/hide
Respects checklist's hideOnComplete setting

ChecklistLauncher - Toggle button
Checklist - Checklist component
useChecklist - Panel control

ChecklistPanel

On this page