Task Filters

Component 57

About

Filter and search tasks by status, priority, assignees, projects, and tags with a live count of active filters and a clear-all action.

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

Code

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

Usage.tsx

"use client";

import TaskFilters from "@/components/ui/task-filters";

export default function Default() {
  return (
    <div className="mx-auto w-full max-w-2xl p-6">
      <TaskFilters
        availableAssignees={[
          { id: "1", name: "Alex Morgan" },
          { id: "2", name: "Jamie Lee" },
          { id: "3", name: "Taylor Reed" },
        ]}
        availableProjects={[
          { id: "p1", name: "Website Redesign" },
          { id: "p2", name: "Mobile App" },
        ]}
        availableTags={["design", "bug", "feature"]}
        onFilterChange={(filter) => console.log(filter)}
      />
    </div>
  );
}