Task

AI chats 40

About

Here is Task component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Task to your project and fits it to your theme.

Code

How Task is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Task,
  TaskContent,
  TaskItem,
  TaskItemFile,
  TaskTrigger,
} from '@/components/ui/task';


export default function DemoOne() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-background p-4">

      {/* Пример с другим контентом */}
      <Task className="w-full max-w-md">
        <TaskTrigger title="Process incoming data" />
        <TaskContent>
          <TaskItem>
            Parse user data from <TaskItemFile>users.csv</TaskItemFile>
          </TaskItem>
          <TaskItem>
            Analyze configuration in <TaskItemFile>config.yaml</TaskItemFile>
          </TaskItem>
        </TaskContent>
      </Task>

    </div>
  );
}