Todo Item

An interactive todo item component with priority colors, due dates, labels, projects, and subtask support.

Review pull requests

Check and review the pending pull requests on GitHub

240 days agoGAIA UIDevelopmentUrgentHigh1/2 subtasks

Usage in Gaia

Task management built into the chat. Track execution next to conversation.

Features

Interactive Checkbox - Toggle todo completion with visual feedback
Priority Levels - High, medium, low, and none with distinct color coding
Due Dates - Smart date formatting with overdue/today indicators
Labels & Tags - Color-coded labels for categorization
Projects - Link todos to projects with custom colors
Subtasks - Track progress with subtask completion count
Click Handlers - Custom handlers for clicks and completion toggles

Installation

npx shadcn@latest add https://ui.heygaia.io/r/todo-item.json

Usage

import { 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}`);
      }}
    />
  );
}

Examples

Priority Levels

Fix critical bug in production

High

Update documentation

Medium

Refactor legacy code

Low

Review team submissions

Props

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

Type Definitions

interface TodoLabel {
  id: string;
  name: string;
  color?: string;
}
 
interface TodoSubtask {
  id: string;
  title: string;
  completed: boolean;
}
 
interface TodoProject {
  id: string;
  name: string;
  color?: string;
}

Pricing Card Twitter Card

On This Page

Meet GAIA

Your open-source, proactive personal AI assistant with 200+ integrations. GAIA combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.

Features

Interactive Checkbox - Toggle todo completion with visual feedback

Priority Levels - High, medium, low, and none with distinct color coding

Due Dates - Smart date formatting with overdue/today indicators

Labels & Tags - Color-coded labels for categorization

Projects - Link todos to projects with custom colors

Subtasks - Track progress with subtask completion count

Click Handlers - Custom handlers for clicks and completion toggles

Usage

import { 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}`);
      }}
    />
  );
}

Props

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; }