Checklist Cell

Animated checklist illustration with sliding tasks and progressive completion.

Installation

npx shadcn@latest add @scrollxui/checklist-cell

Usage

import { ChecklistCell } from '@/components/ui/checklist-cell';

<ChecklistCell
      className='w-full max-w-sm rounded-2xl border border-zinc-200 dark:border-zinc-800'
      initialCompleted={3}
      finalCompleted={6}
      stepInterval={700}
      tasks={[
        'How it all started',
        'Our values and approach',
        'Working together',
        'Union rules and integration',
        'Team structure',
        'Communication norms',
        'Feedback culture',
        'Onboarding wrap-up',
      ]}
    />

API Reference

Checklist Cell

Animated checklist illustration with sliding tasks and progressive completion.

Props

Property	Type	Default	Description
`tasks`	string[]	`DEFAULT_TASKS`	Array of task labels displayed in the checklist animation.
`initialCompleted`	number	`3`	Number of tasks marked as completed at the start of the animation.
`finalCompleted`	number	`—`	Maximum number of tasks to complete before the animation resets.
`stepInterval`	number	`1700`	Time (ms) between each progression step in the checklist animation.
`hoverToPlay`	boolean	`false`	If true, animation starts on hover and resets on mouse leave.
`className`	string	`—`	Additional classes applied to the root container.