Components

Task list

A checklist that strikes out completed tasks and moves them to the bottom of the list.

Dependencies

motion

Interaction Type

Click a row to toggle it.

Props

Options you can pass to customize this component.

Prop
Type
Description
tasks
Task[]

The rows to show, each one an id, a label, and an optional done flag. Pass this to drive the list yourself.

defaultTasks
Task[]

The rows to start with when you are not driving the list. The list tracks which ones are done on its own.

onTasksChange
(tasks: Task[]) => void

Called with the full list every time a row is ticked or unticked.

size
smmdlg

Row size. Text, circle, padding and radius all scale together, and the circle always matches one line of the label.

accent
string

Any CSS color for the filled circle and the focus ring. The strike and the faded text stay grey.

onSettled
() => void

On TaskItem only. Fires once a row has finished ticking, which is how TaskList knows when to move it down.

className
string

Extra classes merged onto the root element (data-slot="task-list").

Installation

npx shadcn@latest add swamimalode07/rare-ui/task-list

How to use

"use client"


import { TaskList } from "@/components/ui/task-list"


export function Demo() {
  return (
    <TaskList
      defaultTasks={[
        { id: "ship", label: "Ship a new component to the registry", done: true },
        { id: "preview", label: "Record a preview for the gallery" },
        { id: "star", label: "Star Rare UI" },
      ]}
    />
  )
}


// one row on its own, no list around it
// <TaskItem label="Star Rare UI" size="sm" onCheckedChange={setDone} />

Source Code

Click the code icon in the top-right corner to view the source code.

Keep in mind

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

  • •Free to use and modify in both personal and commercial projects.
  • •Attribution to Rare UI is appreciated when using a component.
  • •Please don't resell the components as your own kit.
Task list