Task

A task item.

Buy groceries
Milk

Eggs

Bread

Medical Appointment
09/20/2026

Yoga class
60:00

1
import { DueBadge } from "@/components/features/pxl/tasks/due-badge";
2
import {
3
  Task,
4
  TaskActions,
5
  TaskActionsMenu,
6
  TaskActionsMenuItem,
7
  TaskContent,
8
  TaskDescription,
9
  TaskEstimate,
10
  TaskGroup,
11
  TaskHeader,
12
  TaskMedia,
13
  TaskSeparator,
14
  TaskStatus,
15
  TaskTitle,
16
} from "@/components/features/pxl/tasks/task";
17
import type { TaskNotes } from "@/lib/schemas/pxl/tasknotes";
18

19
const formatDate = (date: Date) => {
20
  return date.toISOString().split("T")[0];
21
};
22

23

24
const addDays = (date: Date, days: number) => {
25
  const result = new Date(date);
26
  result.setDate(result.getDate() + days);
27
  return result;
28
};
29

30
const tasks: TaskNotes.Task[] = [
31
  {
32
    title: "Buy groceries",
33
    status: "in-progress",
34
    priority: "low",
35
    description: `
36
- [ ] Milk
37
- [x] Eggs
38
- [ ] Bread
39
`
40
  },
41
  {
42
    title: "Medical Appointment",
43
    status: "open",
44
    priority: "high",
45
  },
46
  {
47
    title: "Yoga class",
48
    status: "done",
49
    priority: "normal",
50
    timeEstimate: 60,
51
  }
52
]
53

54
export default function TaskDemo() {
55
  const today = new Date();
56

57
  tasks[1].due = formatDate(addDays(today, 2));
58

59
  return (
60
    <TaskGroup className="w-full max-w-md has-data-[size=xs]:gap-0">
61
      {
62
        tasks.map((t, i) => (
63
          <>
64
            <Task key={t.title} collapsible={Boolean(t.description)}>
65
              <TaskHeader>
66
                <TaskMedia variant="status">
67
                  <TaskStatus.TaskNotes task={t} />
68
                </TaskMedia>
69
                <TaskTitle.TaskNotes task={t} />
70
                {t.due && <DueBadge.TaskNotes task={t} />}
71
                {t.timeEstimate && <TaskEstimate.TaskNotes task={t} />}
72
                <TaskActions>
73
                  <TaskActionsMenu>
74
                    <TaskActionsMenuItem>
75
                      <svg
76
                        xmlns="http://www.w3.org/2000/svg"
77
                        fill="currentColor"
78
                        viewBox="0 0 24 24"
79
                      >
80
                        <path d="M10 18H8v-2h2v2Zm-2-2H6v-2h2v2Zm4-2v2h-2v-2h2Zm-6 0H4v-2h2v2Zm8 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm2-2h-2V6h2v2Z" />
81
                      </svg>
82
                      Complete
83
                    </TaskActionsMenuItem>
84
                    <TaskActionsMenuItem>
85
                      <svg
86
                        xmlns="http://www.w3.org/2000/svg"
87
                        fill="currentColor"
88
                        viewBox="0 0 24 24"
89
                      >
90
                        <path d="M3 2h18v2H3zm0 5h18v2H3zM1 4h2v3H1zm20 0h2v3h-2zm-2 5h2v11h-2zM3 9h2v11H3zm2 11h14v2H5zm4-9h6v2H9z" />
91
                      </svg>
92
                      Archive
93
                    </TaskActionsMenuItem>
94
                    <TaskActionsMenuItem variant="destructive">
95
                      <svg
96
                        xmlns="http://www.w3.org/2000/svg"
97
                        fill="currentColor"
98
                        viewBox="0 0 24 24"
99
                      >
100
                        <path d="M18 22H6V20H18V22ZM9 6H15V4H17V6H22V8H20V20H18V8H6V20H4V8H2V6H7V4H9V6ZM15 4H9V2H15V4Z" />
101
                      </svg>
102
                      Delete
103
                    </TaskActionsMenuItem>
104
                  </TaskActionsMenu>
105
                </TaskActions>
106
              </TaskHeader>
107
              {t.description && (
108
                <TaskContent>
109
                  <TaskDescription.TaskNotes task={t} />
110
                </TaskContent>
111
              )}
112
            </Task>
113

114
            {i !== tasks.length -1 && (<TaskSeparator className="m-0" />)}
115
          </>
116
        ))
117
      }
118
    </TaskGroup>
119
  );
120
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/tasks/task

Copy and paste the following code into your project.

1
import { mergeProps } from "@base-ui/react/merge-props";
2
import { useRender } from "@base-ui/react/use-render";
3
import { cva, type VariantProps } from "class-variance-authority";
4
import {
5
  type ComponentProps,
6
  createContext,
7
  type PropsWithChildren,
8
  useContext,
9
  useState,
10
} from "react";
11

12
import { DueBadge } from "@/components/features/pxl/tasks/due-badge";
13
import { EstimateBadge } from "@/components/features/pxl/tasks/estimate-badge";
14
import { IdBadge } from "@/components/features/pxl/tasks/id-badge";
15
import { ProjectBadge } from "@/components/features/pxl/tasks/project-badge";
16
import { ScheduledBadge } from "@/components/features/pxl/tasks/scheduled-badge";
17
import { StatusToggle } from "@/components/features/pxl/tasks/status-toggle";
18
import { Button } from "@/components/ui/pxl/button";
19
import {
20
  DropdownMenu,
21
  DropdownMenuContent,
22
  DropdownMenuGroup,
23
  DropdownMenuItem,
24
  DropdownMenuTrigger,
25
} from "@/components/ui/pxl/dropdown-menu";
26
import { Markdown } from "@/components/ui/pxl/markdown";
27
import { Separator } from "@/components/ui/pxl/separator";
28
import type { TaskNotes } from "@/lib/schemas/pxl/tasknotes";
29
import { cn } from "@/lib/utils";
30

31
const TaskCollapseContext = createContext<{
32
  open: boolean;
33
  toggle: () => void;
34
} | null>(null);
35

36
function TaskGroup({ className, ...props }: ComponentProps<"ul">) {
37
  return (
38
    <ul
39
      data-slot="task-group"
40
      className={cn(
41
        "group/task-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
42
        className,
43
      )}
44
      {...props}
45
    />
46
  );
47
}
48

49
function TaskSeparator({
50
  className,
51
  ...props
52
}: ComponentProps<typeof Separator>) {
53
  return (
54
    <Separator
55
      data-slot="task-separator"
56
      orientation="horizontal"
57
      border="dashed"
58
      size="md"
59
      className={cn("my-2", className)}
60
      {...props}
61
    />
62
  );
63
}
64

65
const taskVariants = cva("group/task w-full", {
66
  variants: {
67
    size: {
68
      default: "gap-3.5 px-4 py-3.5",
69
      sm: "gap-2.5 px-3 py-2.5",
70
      xs: "gap-2 px-2.5 py-2",
71
    },
72
  },
73
  defaultVariants: {
74
    size: "default",
75
  },
76
});
77

78
function Task({
79
  collapsible,
80
  defaultOpen = false,
81
  className,
82
  size = "xs",
83
  render,
84
  ...props
85
}: useRender.ComponentProps<"li"> &
86
  VariantProps<typeof taskVariants> & {
87
    collapsible?: boolean;
88
    defaultOpen?: boolean;
89
  }) {
90
  const [open, setOpen] = useState(defaultOpen);
91

92
  const item = useRender({
93
    defaultTagName: "li",
94
    props: mergeProps<"li">(
95
      {
96
        className: cn(taskVariants({ size, className })),
97
      },
98
      props,
99
    ),
100
    render,
101
    state: {
102
      slot: "item",
103
      size,
104
    },
105
  });
106

107
  if (!collapsible) return item;
108

109
  return (
110
    <TaskCollapseContext.Provider
111
      value={{ open, toggle: () => setOpen((o) => !o) }}
112
    >
113
      {item}
114
    </TaskCollapseContext.Provider>
115
  );
116
}
117

118
function TaskHeader({ className, ...props }: ComponentProps<"div">) {
119
  return (
120
    <div
121
      data-slot="task-header"
122
      className={cn("flex w-full items-center flex-wrap gap-2", className)}
123
      {...props}
124
    />
125
  );
126
}
127

128
const taskMediaVariants = cva(
129
  "flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none",
130
  {
131
    variants: {
132
      variant: {
133
        default: "bg-transparent",
134
        status: "[&_svg:not([class*='size-'])]:size-4",
135
        badge: "[&_svg:not([class*='size-'])]:size-4",
136
      },
137
    },
138
    defaultVariants: {
139
      variant: "default",
140
    },
141
  },
142
);
143

144
function TaskMedia({
145
  className,
146
  variant = "default",
147
  ...props
148
}: ComponentProps<"div"> & VariantProps<typeof taskMediaVariants>) {
149
  return (
150
    <div
151
      data-slot="task-media"
152
      data-variant={variant}
153
      className={cn(taskMediaVariants({ variant, className }))}
154
      {...props}
155
    />
156
  );
157
}
158

159
function TaskContent({ className, ...props }: ComponentProps<"div">) {
160
  return (
161
    <div
162
      data-slot="task-content"
163
      className={cn(
164
        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=task-content]]:flex-none",
165
        className,
166
      )}
167
      {...props}
168
    />
169
  );
170
}
171

172
function TaskTitle({
173
  className,
174
  status,
175
  ...props
176
}: ComponentProps<"div"> & {
177
  status?: "open" | "in-progress" | "done";
178
}) {
179
  const ctx = useContext(TaskCollapseContext);
180
  return (
181
    <div
182
      data-slot="task-title"
183
      data-state={ctx ? (ctx.open ? "open" : "closed") : undefined}
184
      onClick={ctx?.toggle}
185
      className={cn(
186
        "flex-1 line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug underline-offset-4",
187
        status === "done" && "line-through text-muted-foreground",
188
        ctx && "cursor-pointer select-none hover:underline",
189
        className,
190
      )}
191
      {...props}
192
    />
193
  );
194
}
195

196
function TaskDescription({
197
  className,
198
  children,
199
  ...props
200
}: ComponentProps<"div">) {
201
  const ctx = useContext(TaskCollapseContext);
202

203
  if (!ctx) {
204
    return (
205
      <div data-slot="task-description" className={cn(className)} {...props}>
206
        {children}
207
      </div>
208
    );
209
  }
210

211
  return (
212
    <div
213
      data-slot="task-description"
214
      data-state={ctx.open ? "open" : "closed"}
215
      className={cn(
216
        "grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 ease-out",
217
        "data-[state=open]:grid-rows-[1fr]",
218
        className,
219
      )}
220
      {...props}
221
    >
222
      <div className="overflow-hidden min-h-0">{children}</div>
223
    </div>
224
  );
225
}
226

227
function TaskActions({ className, ...props }: ComponentProps<"div">) {
228
  return (
229
    <div
230
      data-slot="task-actions"
231
      className={cn(
232
        "flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none",
233
        className,
234
      )}
235
      {...props}
236
    />
237
  );
238
}
239

240
function TaskActionsMenu({
241
  children,
242
  ...props
243
}: Omit<ComponentProps<typeof DropdownMenu>, "children"> & PropsWithChildren) {
244
  return (
245
    <DropdownMenu {...props}>
246
      <DropdownMenuTrigger
247
        render={
248
          <Button size="icon-xs" variant="ghost" title="More">
249
            <svg
250
              xmlns="http://www.w3.org/2000/svg"
251
              fill="currentColor"
252
              viewBox="0 0 24 24"
253
            >
254
              <path d="M13 23h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-2-2h-2v-2h2v2Zm0-4h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-2-2h-2V9h2v2Zm0-4h-2V5h2v2Zm-2-2H9V3h2v2Zm4 0h-2V3h2v2Zm-2-2h-2V1h2v2Z" />
255
            </svg>
256
          </Button>
257
        }
258
      />
259
      <DropdownMenuContent align="end">
260
        <DropdownMenuGroup>{children}</DropdownMenuGroup>
261
      </DropdownMenuContent>
262
    </DropdownMenu>
263
  );
264
}
265

266
function TaskActionsMenuItem(props: ComponentProps<typeof DropdownMenuItem>) {
267
  return <DropdownMenuItem {...props} />;
268
}
269

270
function TaskNotesTaskTitle({
271
  task,
272
  ...props
273
}: ComponentProps<typeof TaskTitle> & {
274
  task: TaskNotes.Task;
275
}) {
276
  return (
277
    <TaskTitle
278
      status={task.status === "none" ? "open" : task.status}
279
      {...props}
280
    >
281
      {task.title}
282
    </TaskTitle>
283
  );
284
}
285
TaskTitle.TaskNotes = TaskNotesTaskTitle;
286

287
function TaskNotesTaskDescription({
288
  task,
289
  ...props
290
}: ComponentProps<typeof TaskDescription> & { task: TaskNotes.Task }) {
291
  return (
292
    task.description && (
293
      <TaskDescription {...props}>
294
        <Markdown>{task.description}</Markdown>
295
      </TaskDescription>
296
    )
297
  );
298
}
299
TaskDescription.TaskNotes = TaskNotesTaskDescription;
300

301
export {
302
  DueBadge as TaskDue,
303
  EstimateBadge as TaskEstimate,
304
  IdBadge as TaskId,
305
  ProjectBadge as TaskProject,
306
  ScheduledBadge as TaskScheduled,
307
  StatusToggle as TaskStatus,
308
  Task,
309
  TaskActions,
310
  TaskActionsMenu,
311
  TaskActionsMenuItem,
312
  TaskContent,
313
  TaskDescription,
314
  TaskGroup,
315
  TaskHeader,
316
  TaskMedia,
317
  TaskSeparator,
318
  TaskTitle,
319
};

Update the import paths to match your project setup.

Usage

import {
  Task,
  TaskActions,
  TaskContent,
  TaskDescription
  TaskHeader,
  TaskMedia,
  TaskStatus,
  TaskTitle,
} from "@/components/features/pxl/tasks/task";

<Task collapsible>
  <TaskHeader>
    <TaskMedia variant="status">
      <TaskStatus />
    </ItemMedia>
    <TaskTitle>Title</TaskTitle>
    <TaskActions>
      <TaskActionItem>Action</TaskActionItem>
    </TaskActions>
  </TaskHeader>
  <TaskContent>
    <TaskDescription>Description</TaskDescription>
  </TaskContent>
</Item>

Composition

Use the following composition to build a Task:

TaskGroup
└── Task
    ├── TaskHeader
    │   ├── TaskMedia
    │   │   └── TaskStatus
    │   ├── TaskTitle
    │   └── TaskActions
    │       └── TaskActionItem
    └─── TaskContent
          └── TaskDescription

API Reference

Task

The main component for displaying tasks.

TaskGroup

A container that groups related tasks together with consistent styling.

<TaskGroup>
  <Task />
  <Task />
</TaskGroup>

TaskSeparator

A separator between tasks in a group.

<TaskGroup>
  <Task />
  <TaskSeparator />
  <Task />
</TaskGroup>

TaskMedia

Use TaskMedia to display media content such as status toggle or badges.

Prop	Type	Default
`variant`	`"default" \| "status" \| "badge"`	`"default"`

<TaskMedia variant="status">
  <TaskStatus />
</ItemMedia>

<TaskMedia variant="badge">
  <TaskId />
</TaskMedia>

TaskHeader

Wraps the title, media and actions of the task.

<Task>
  <TaskHeader>Header</TaskHeader>
  <TaskContent>...</TaskContent>
</Task>

TaskContent

Wraps the description and additional information of the task.

<TaskContent>
  <TaskDescription>Description</TaskDescription>
</TaskContent>

TaskTitle

Displays the title of the task.

<TaskTitle>Item Title</TaskTitle>

TaskDescription

Displays the description of the task.

<TaskDescription>Item description</TaskDescription>

TaskActions

Container for action buttons or other interactive elements.

<TaskActions>
  <TaskActionItem>Action</TaskActionItem>
</TaskActions>