Browse components
Checklist Cell
A checklist card whose ticks draw in, labels strike through, finished items glide to the bottom and a progress ring fills toward a celebratory check.
Installation
npx shadcn@latest add @glint-ui/checklist-cellFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/checklist-cell.json
Usage
import { ChecklistCell } from "@/components/ui/checklist-cell";
<ChecklistCell
title="Onboarding"
defaultItems={[
{ id: "profile", label: "Complete your profile", done: true },
{ id: "invite", label: "Invite a teammate", tag: "2 min" },
]}
onChange={(items) => save(items)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Launch checklist" | Card heading. |
| allowAdd | boolean | true | Show the Add a task field. |
| sinkCompleted | boolean | true | Move completed items to the bottom. |
| defaultItems | ReactNode | — | `{ id, label, done?, tag? }[]`. Ships with six launch tasks. |
| onChange | ReactNode | — | `(items) => void`, called after every change. |
| className | string | — | Extra classes for the root element. |