Filter Builder

Forms

About

An interactive filter-condition builder with field, operator, and value rows joined by AND/OR logic, for search bars and data-table filtering UIs

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

Code

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

Usage.tsx

import * as React from "react";
import { FilterBuilder } from "@/components/ui/filter-builder";

export default function FilterBuilderDemo() {
  const [logic, setLogic] = React.useState("AND");
  const [conditions, setConditions] = React.useState([
    { id: "1", field: "status", operator: "eq", value: "Active" },
  ]);

  return (
    <div className="w-full max-w-xl p-6 bg-[var(--ui-bg)] text-[var(--ui-fg)]">
      <FilterBuilder
        fields={[
          { value: "name", label: "Name" },
          { value: "status", label: "Status" },
          { value: "role", label: "Role" },
        ]}
        conditions={conditions}
        onConditionsChange={setConditions}
        logic={logic}
        onLogicChange={setLogic}
      />
    </div>
  );
}