An interactive todo item component with priority colors, due dates, labels, projects, and subtask support.
Command Palette
Search for a command to run...
Search for a command to run...
An interactive todo item component with priority colors, due dates, labels, projects, and subtask support.
Check and review the pending pull requests on GitHub
Task management built into the chat. Track execution next to conversation.
npx shadcn@latest add https://ui.heygaia.io/r/todo-item.jsonimport { TodoItem } from "@/components/ui/todo-item";
export default function Example() {
return (
<TodoItem
id="1"
title="Complete project documentation"
description="Write comprehensive docs for the new API"
completed={false}
priority="high"
dueDate={new Date()}
onToggleComplete={(id, completed) => {
console.log(`Todo ${id} completed: ${completed}`);
}}
/>
);
}| Prop | Type | Description |
|---|---|---|
| id | string | Unique identifier for the todo |
| title | string | Todo title |
| description | string | Optional description |
| completed | boolean | Completion status |
| priority | "high" | "medium" | "low" | "none" | Priority level |
| dueDate | string | Date | Optional due date |
| labels | TodoLabel[] | Array of labels |
| subtasks | TodoSubtask[] | Array of subtasks |
| project | TodoProject | Optional project assignment |
| onToggleComplete | (id, completed) => void | Completion toggle handler |
| onClick | (id) => void | Click handler |
| isSelected | boolean | Selected state |
| className | string | Additional CSS classes |
interface TodoLabel {
id: string;
name: string;
color?: string;
}
interface TodoSubtask {
id: string;
title: string;
completed: boolean;
}
interface TodoProject {
id: string;
name: string;
color?: string;
}