FilterCN LogoFilterCN
v0.2.2 is now live

The Ultimate Conditional Filter for React

A highly customizable, URL-driven filtering component built for modern web applications. Packed with Global Search, DatePickers, and Debounced Async Selects. Drop it in and let your users find exactly what they need.

GitHub

Everything you need. Nothing you don't.

Designed to cover 99% of filtering use cases while staying incredibly lightweight and easy to integrate.

Framework Agnostic
Generates queries perfectly suited for popular REST API structures out of the box. Supports param prefixes and name spaces.
Beautiful UI & DatePickers
Built on top of Radix UI and styled with Tailwind CSS via shadcn/ui. Comes with an elegant Calendar DatePicker and Debounced Combobox built-in.
Global Search & Logic
Includes a sleek FilterBar with full-text search, auto-debounce, and a seamless toggle for complex AND/OR conditional statements.
URL State Synchronization
Deeply integrated with Next.js router. Every filter and search query is instantly synced with the URL without unneeded page reloads.

Play with the Demo

This is a fully working example. Add filters, stack options, and watch the URL and mock API response update in real time.

localhost:3000
Loading demo...

Install in seconds

Use the CLI to automatically scaffold the components into your Next.js application, or copy them manually.

Run the automated CLI using your preferred package manager. It will scaffold 19 files and install required dependencies.

>_
pnpm dlx filtercn init

2. Wrap your components

page.tsx
import { FilterProvider, FilterBar } from "@/components/conditional-filter";

const myFields = [
  { name: "status", label: "Status", type: "select", options: [...] },
  { name: "price", label: "Price", type: "number" },
];

export default function MyTable() {
  return (
    <FilterProvider 
      config={{ 
        fields: myFields, 
        paramStyle: "underscore",
        allowConjunctionToggle: true,
        searchParamName: "q"
      }}
    >
      <FilterBar searchPlaceholder="Search..." />
    </FilterProvider>
  );
}

Frequently Asked Questions

Everything you need to know about the Conditional Filter component.