Task List
A working task list with illustrative data and frontend interactions.
Make it yours.
Install the editable source and its dependencies into your React + Tailwind project.
Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/task-list.jsonUse it
Scroll horizontally for long lines
"use client";
import { TaskList } from "@/components/jez-ui/blocks/task-list";
export default function Example() {
return (
<>
<TaskList />
</>
);
}
Compose your own
These styled parts are included in the same install. Use children to build your layout; add className only when you want an override.
Scroll horizontally for long lines
"use client";
import { useState } from "react";
import {
TaskList,
TaskListItem,
TaskListCheckbox,
TaskListTitle,
TaskListStatus,
} from "@/components/jez-ui/blocks/task-list";
export default function TaskListExample() {
const [tasks, setTasks] = useState([
{ id: "review", title: "Review the draft", status: "To do" },
{ id: "publish", title: "Publish the story", status: "To do" },
]);
return (
<TaskList value={tasks} onValueChange={setTasks}>
{tasks.map((task) => (
<TaskListItem key={task.id} taskId={task.id}>
<TaskListTitle />
<a href={`#${task.id}`} className="text-xs">
Open
</a>
<TaskListStatus />
<TaskListCheckbox />
</TaskListItem>
))}
</TaskList>
);
}
Scroll horizontally for long lines
import { TaskList, TaskListItem, TaskListCheckbox, TaskListTitle, TaskListStatus } from "@/components/jez-ui/blocks/task-list";Props & types
Scroll horizontally for long lines
export type TaskListOptions = {
className?: string;
value?: DemoTask[];
defaultValue?: DemoTask[];
onValueChange?: (value: DemoTask[]) => void;
};
export type TaskListProps = Omit<
React.ComponentProps<"ul">,
keyof TaskListOptions
> &
TaskListOptions;
TaskListPropsSource
View 7 source files
registry/blocks/task-list.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "../ui/utils";
import { useControllable } from "../ui/use-controllable";
import { initialTasks, type DemoTask } from "./kanban-board";
import { Checkbox } from "../ui/checkbox";
const TaskListContext = React.createContext<{
tasks: DemoTask[];
toggle: (id: string, checked: boolean) => void;
} | null>(null);
const TaskListItemContext = React.createContext<DemoTask | null>(null);
function useTaskListItem() {
const list = React.useContext(TaskListContext);
const task = React.useContext(TaskListItemContext);
if (!list || !task)
throw new Error(
"TaskListCheckbox, TaskListTitle and TaskListStatus require a TaskListItem with taskId inside TaskList.",
);
return { ...list, task };
}
export type TaskListOptions = {
className?: string;
value?: DemoTask[];
defaultValue?: DemoTask[];
onValueChange?: (value: DemoTask[]) => void;
};
export type TaskListProps = Omit<
React.ComponentProps<"ul">,
keyof TaskListOptions
> &
TaskListOptions;
export function TaskList({
className,
value: controlledValue,
defaultValue = initialTasks,
onValueChange,
children,
...rootProps
}: TaskListProps) {
const [tasks, setTasks] = useControllable<DemoTask[]>(
controlledValue,
defaultValue,
onValueChange,
);
return (
<ul
{...rootProps}
className={cn(
"grid overflow-hidden rounded-xl border border-border",
className,
)}
>
<TaskListContext.Provider
value={{
tasks,
toggle: (id, checked) =>
setTasks((tasks) =>
tasks.map((task) =>
task.id === id
? { ...task, status: checked ? "Done" : "To do" }
: task,
),
),
}}
>
{children !== undefined ? (
children
) : (
<>
{tasks.map((t) => (
<TaskListItem key={t.id} taskId={t.id}>
<TaskListCheckbox />
<TaskListTitle />
<TaskListStatus />
</TaskListItem>
))}
</>
)}
</TaskListContext.Provider>
</ul>
);
}
export function TaskListItem({
className,
taskId,
...props
}: React.ComponentProps<"li"> & { taskId?: string }) {
const list = React.useContext(TaskListContext);
const task = list?.tasks.find((task) => task.id === taskId);
if (taskId !== undefined && !task)
throw new Error(`TaskListItem could not find task ${taskId} in TaskList.`);
return (
<TaskListItemContext.Provider value={task ?? null}>
<li
data-slot="task-list-item"
className={cn(
"flex items-center gap-3 border-b border-border/60 px-4 py-4 last:border-0 hover:bg-muted/25",
className,
)}
{...props}
/>
</TaskListItemContext.Provider>
);
}
export function TaskListCheckbox({
onCheckedChange,
...props
}: React.ComponentProps<typeof Checkbox>) {
const { task, toggle } = useTaskListItem();
return (
<Checkbox
aria-label={`Complete ${task.title}`}
checked={task.status === "Done"}
{...props}
onCheckedChange={(checked) => {
toggle(task.id, checked === true);
onCheckedChange?.(checked);
}}
/>
);
}
export function TaskListTitle({
className,
children,
...props
}: React.ComponentProps<"span">) {
const { task } = useTaskListItem();
return (
<span
data-slot="task-list-title"
className={cn(
"flex-1 text-sm",
task.status === "Done" && "line-through text-muted-foreground",
className,
)}
{...props}
>
{children === undefined ? task.title : children}
</span>
);
}
export function TaskListStatus({
className,
children,
...props
}: React.ComponentProps<"span">) {
const { task } = useTaskListItem();
return (
<span
data-slot="task-list-status"
className={cn(
"hidden rounded-md bg-muted/60 px-2 py-1 text-xs text-muted-foreground sm:inline",
className,
)}
{...props}
>
{children === undefined ? task.status : children}
</span>
);
}
registry/ui/utils.ts
Scroll horizontally for long lines
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
return twMerge(clsx(values));
}
registry/ui/use-controllable.ts
Scroll horizontally for long lines
"use client";
import { useRef, useState, type SetStateAction } from "react";
/** Controlled or instance-local state. Functional updates also work before a rerender. */
export function useControllable<T>(
value: T | undefined,
initial: T,
onChange?: (value: T) => void,
) {
const [local, setLocal] = useState(initial);
const current = useRef(value === undefined ? local : value);
current.current = value === undefined ? local : value;
return [
current.current,
(action: SetStateAction<T>) => {
const next =
typeof action === "function"
? (action as (previous: T) => T)(current.current)
: action;
current.current = next;
if (value === undefined) setLocal(next);
onChange?.(next);
},
] as const;
}
registry/blocks/kanban-board.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import {
GripVertical,
Plus,
Circle,
CircleDashed,
CircleCheck,
RotateCcw,
} from "lucide-react";
import { cn } from "../ui/utils";
import { useControllable } from "../ui/use-controllable";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
export type DemoTask = { id: string; title: string; status: string };
export const initialTasks: DemoTask[] = [
{ id: "1", title: "Explore homepage directions", status: "To do" },
{ id: "2", title: "Build the component preview", status: "In progress" },
{ id: "3", title: "Review keyboard navigation", status: "In progress" },
{ id: "4", title: "Write the project brief", status: "Done" },
];
const defaultStatuses = ["To do", "In progress", "Done"];
const statusIcons = [CircleDashed, Circle, CircleCheck];
export type KanbanBoardOptions = {
className?: string;
value?: DemoTask[];
defaultValue?: DemoTask[];
onValueChange?: (value: DemoTask[]) => void;
statuses?: typeof defaultStatuses;
};
export type KanbanBoardProps = Omit<
React.ComponentProps<"section">,
keyof KanbanBoardOptions
> &
KanbanBoardOptions;
function useKanbanBoardModel({
statuses = defaultStatuses,
className,
value: controlledValue,
defaultValue = initialTasks,
onValueChange,
children,
...rootProps
}: KanbanBoardProps) {
const [tasks, setTasks] = useControllable<DemoTask[]>(
controlledValue,
defaultValue,
onValueChange,
);
const reset = () => setTasks(defaultValue);
const [title, setTitle] = React.useState("");
const [dragging, setDragging] = React.useState<string>();
const [over, setOver] = React.useState<string>();
const [announcement, setAnnouncement] = React.useState("");
function move(id: string, status: string) {
if (!statuses.includes(status) || !tasks.some((t) => t.id === id)) return;
setTasks((t) => t.map((x) => (x.id === id ? { ...x, status } : x)));
setAnnouncement(
`${tasks.find((t) => t.id === id)?.title} moved to ${status}.`,
);
setDragging(undefined);
setOver(undefined);
}
return {
statuses,
className,
controlledValue,
defaultValue,
onValueChange,
children,
rootProps,
tasks,
setTasks,
reset,
title,
setTitle,
dragging,
setDragging,
over,
setOver,
announcement,
setAnnouncement,
move,
};
}
const KanbanBoardCompositionContext = React.createContext<ReturnType<
typeof useKanbanBoardModel
> | null>(null);
function useKanbanBoardComposition() {
const context = React.useContext(KanbanBoardCompositionContext);
if (!context)
throw new Error("KanbanBoard parts must be inside KanbanBoard.");
return context;
}
export function KanbanBoard(props: KanbanBoardProps) {
const model = useKanbanBoardModel(props);
const { className, rootProps, children } = model;
return (
<KanbanBoardCompositionContext.Provider value={model}>
<section {...rootProps} className={cn("grid gap-5", className)}>
{children !== undefined ? (
children
) : (
<>
<KanbanBoardComposer />
<KanbanBoardColumns />
<KanbanBoardFooter />
<KanbanBoardStatus />
</>
)}
</section>
</KanbanBoardCompositionContext.Provider>
);
}
export function KanbanBoardForm({
className,
...props
}: React.ComponentProps<"form">) {
return (
<form
data-slot="kanban-board-form"
className={cn("flex max-w-xl gap-2", className)}
{...props}
/>
);
}
export function KanbanBoardContent({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="kanban-board-content"
className={cn("grid gap-5 lg:grid-cols-3", className)}
{...props}
/>
);
}
export function KanbanBoardItemTitle({
className,
...props
}: React.ComponentProps<"h3">) {
return (
<h3
data-slot="kanban-board-itemtitle"
className={cn(
"mb-4 flex items-center gap-2 px-1 py-1 text-sm font-medium",
className,
)}
{...props}
/>
);
}
export function KanbanBoardHeader({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="kanban-board-header"
className={cn(
"flex flex-wrap items-center justify-between gap-3",
className,
)}
{...props}
/>
);
}
export function KanbanBoardDescription({
className,
...props
}: React.ComponentProps<"p">) {
return (
<p
data-slot="kanban-board-description"
className={cn("sr-only", className)}
{...props}
/>
);
}
export function KanbanBoardItem({
className,
...props
}: React.ComponentProps<"section">) {
return (
<section
data-slot="kanban-board-item"
className={cn(
"min-h-72 rounded-xl border border-transparent bg-muted/35 p-3 transition-colors",
className,
)}
{...props}
/>
);
}
export function KanbanBoardComposer({
children,
...props
}: Partial<React.ComponentProps<typeof KanbanBoardForm>> & {
children?: React.ReactNode;
}) {
const { statuses, setTasks, title, setTitle } = useKanbanBoardComposition();
const defaultonSubmit: NonNullable<
React.ComponentProps<typeof KanbanBoardForm>["onSubmit"]
> = (e) => {
e.preventDefault();
if (title.trim()) {
setTasks((t) => [
...t,
{
id: crypto.randomUUID(),
title: title.trim(),
status: statuses[0] ?? "To do",
},
]);
setTitle("");
}
};
return (
<KanbanBoardForm
{...props}
onSubmit={(event) => {
props.onSubmit?.(event);
if (!event.defaultPrevented) defaultonSubmit(event);
}}
>
{children === undefined ? (
<>
<Input
aria-label="New task title"
placeholder="What needs doing?"
required
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<Button type="submit">
<Plus size={16} />
Add task
</Button>
</>
) : (
children
)}
</KanbanBoardForm>
);
}
export function KanbanBoardColumns({
children,
...props
}: Partial<React.ComponentProps<typeof KanbanBoardContent>> & {
children?: React.ReactNode;
}) {
const {
statuses,
tasks,
setTasks,
dragging,
setDragging,
over,
setOver,
move,
} = useKanbanBoardComposition();
return (
<KanbanBoardContent {...props}>
{children === undefined
? statuses.map((status, index) => {
const Icon = statusIcons[index] ?? Circle;
const column = tasks.filter((t) => t.status === status);
return (
<KanbanBoardItem
key={status}
aria-label={status}
onDragOver={(e) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
setOver(status);
}}
onDragLeave={(e) => {
if (!e.currentTarget.contains(e.relatedTarget as Node))
setOver(undefined);
}}
onDrop={(e) => {
e.preventDefault();
move(e.dataTransfer.getData("text/plain"), status);
}}
className={cn(
over === status && "border-primary/40 bg-primary/5",
)}
>
<KanbanBoardItemTitle>
<Icon
size={16}
className={cn(
index === 1 ? "text-primary" : "text-muted-foreground",
)}
/>
{status}
<span className="ml-1 text-xs text-muted-foreground">
{column.length}
</span>
</KanbanBoardItemTitle>
<div className="grid gap-2.5">
{column.map((t) => (
<article
key={t.id}
className={cn(
"group rounded-lg border border-border bg-background p-3.5 shadow-xs transition-opacity",
dragging === t.id && "opacity-40",
)}
>
<div className="mb-3 flex items-center justify-between">
<span className="font-mono text-xs text-muted-foreground">
PRJ-
{t.id.length > 6
? t.id.slice(0, 4).toUpperCase()
: String(Number(t.id) + 100)}
</span>
<button
type="button"
draggable
aria-label={`Drag ${t.title}`}
title="Drag to another column, or use the status menu below"
onDragStart={(e) => {
e.dataTransfer.setData("text/plain", t.id);
e.dataTransfer.effectAllowed = "move";
setDragging(t.id);
}}
onDragEnd={() => {
setDragging(undefined);
setOver(undefined);
}}
className="-m-1 cursor-grab rounded p-1 text-muted-foreground hover:bg-muted active:cursor-grabbing"
>
<GripVertical size={16} />
</button>
</div>
<input
aria-label={`Edit task ${t.title}`}
value={t.title}
onChange={(e) =>
setTasks((v) =>
v.map((x) =>
x.id === t.id
? { ...x, title: e.target.value }
: x,
),
)
}
className="mb-4 w-full min-w-0 rounded bg-transparent py-1 text-sm font-medium outline-none focus:ring-2 focus:ring-primary/30"
/>
<div className="flex items-center justify-between gap-2 border-t border-border/50 pt-3">
<select
aria-label={`Status for ${t.title}`}
value={t.status}
onChange={(e) => move(t.id, e.target.value)}
className="max-w-full cursor-pointer rounded-md border-0 bg-muted/70 px-2 py-1 text-xs text-muted-foreground"
>
{statuses.map((s) => (
<option key={s}>{s}</option>
))}
</select>
<span
className="grid size-6 place-items-center rounded-full border border-border bg-muted text-xs"
title="Alex Morgan"
>
AM
</span>
</div>
</article>
))}
{!column.length && (
<div
className={cn(
"grid min-h-40 place-items-center rounded-lg border border-dashed border-border text-sm text-muted-foreground",
dragging && "border-primary/40",
)}
>
Drop a task here
</div>
)}
</div>
</KanbanBoardItem>
);
})
: children}
</KanbanBoardContent>
);
}
export function KanbanBoardFooter({
children,
...props
}: Partial<React.ComponentProps<typeof KanbanBoardHeader>> & {
children?: React.ReactNode;
}) {
const { reset } = useKanbanBoardComposition();
return (
<KanbanBoardHeader {...props}>
{children === undefined ? (
<>
<p className="text-xs text-muted-foreground">
Drag using the grip, or change a task’s status from its menu.
</p>
<Button size="sm" variant="ghost" onClick={reset}>
<RotateCcw size={13} />
Reset changes
</Button>
</>
) : (
children
)}
</KanbanBoardHeader>
);
}
export function KanbanBoardStatus({
children,
...props
}: Partial<React.ComponentProps<typeof KanbanBoardDescription>> & {
children?: React.ReactNode;
}) {
const { announcement } = useKanbanBoardComposition();
return (
<KanbanBoardDescription role="status" {...props}>
{children === undefined ? announcement : children}
</KanbanBoardDescription>
);
}
registry/ui/input.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
export function Input({ className, ...props }: React.ComponentProps<"input">) {
return (
<input
className={cn(
"block h-10 w-full min-w-0 rounded-lg border border-border bg-background px-3 text-sm leading-normal shadow-[0_1px_2px_#00000004] transition-[border-color,box-shadow] placeholder:text-muted-foreground/75 hover:border-foreground/25 focus:border-primary focus:outline-none focus:ring-3 focus:ring-primary/10 aria-invalid:border-danger aria-invalid:ring-danger/10 disabled:cursor-not-allowed disabled:bg-muted/50 disabled:opacity-50",
className,
)}
{...props}
/>
);
}
registry/ui/button.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { Slot } from "radix-ui";
import { LoaderCircle } from "lucide-react";
import { cn } from "./utils";
export type ButtonProps = React.ComponentProps<"button"> & {
variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
size?: "sm" | "md" | "lg";
loading?: boolean;
asChild?: boolean;
};
export function Button({
variant = "primary",
size = "md",
loading,
asChild,
className,
children,
disabled,
...props
}: ButtonProps) {
const Comp = asChild ? Slot.Root : "button";
return (
<Comp
type={asChild ? undefined : "button"}
disabled={asChild ? undefined : disabled || loading}
aria-disabled={disabled || loading || undefined}
aria-busy={loading || undefined}
className={cn(
"relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-transparent text-sm font-medium leading-none transition-[background-color,border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:scale-[.98] disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none [&_svg]:shrink-0",
{
"bg-primary text-primary-foreground shadow-[inset_0_1px_0_#ffffff26,0_1px_2px_#00000012] hover:bg-primary/90":
variant === "primary",
"border-border/60 bg-muted text-foreground hover:bg-muted/70":
variant === "secondary",
"border-border bg-background text-foreground shadow-sm hover:bg-muted/60":
variant === "outline",
"text-muted-foreground hover:bg-muted hover:text-foreground":
variant === "ghost",
"bg-danger text-danger-foreground hover:bg-danger/90":
variant === "danger",
},
{
"h-8 px-3 text-xs": size === "sm",
"h-10 px-4": size === "md",
"h-12 px-6": size === "lg",
},
className,
)}
{...props}
>
{asChild ? (
children
) : (
<>
<span
className={cn(
"inline-flex min-w-0 flex-1 items-center justify-center gap-2",
loading && "invisible",
)}
>
{children}
</span>
{loading && (
<LoaderCircle
aria-hidden="true"
className="absolute size-4 animate-spin motion-reduce:animate-none"
/>
)}
</>
)}
</Comp>
);
}
registry/ui/checkbox.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
import { Checkbox as Primitive } from "radix-ui";
export function Checkbox({
className,
...props
}: React.ComponentProps<typeof Primitive.Root>) {
return (
<Primitive.Root
className={cn(
"size-5 rounded border border-border data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className,
)}
{...props}
>
<Primitive.Indicator className="flex items-center justify-center">
<svg viewBox="0 0 16 16" className="size-4" aria-hidden="true">
<path
d="m3 8 3 3 7-7"
fill="none"
stroke="currentColor"
strokeWidth="2"
/>
</svg>
</Primitive.Indicator>
</Primitive.Root>
);
}
Dependencies
clsx@2.1.1 · tailwind-merge@3.5.0 · lucide-react@0.577.0 · radix-ui@1.6.7
Accessibility & behaviour
Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.
Read the accessibility and performance guide →