Development · Web app

Shadcn Filters

Composable shadcn/ui filter components with URL persistence and TanStack integration

Visit reui.io ↗

ReUI Filters is a collection of production-ready filtering components built on top of shadcn/ui patterns. It connects directly to TanStack Table column filters, validates schema inputs via Zod, and synchronizes state with URL search parameters using nuqs. It provides ready-made chips, operator selectors, and multiple field types without having to build complex filter logic from scratch.

What it's for

  • Add complex faceted filtering to React and Next.js data tables
  • Persist applied table filters to shareable URL query parameters
  • Validate multi-type filter inputs using Zod before querying server APIs
  • Filter large datasets server-side using debounced async callbacks

Features

  • Integration with TanStack Table column filter APIs
  • URL state serialization and restoration powered by nuqs
  • Zod schema validation on filter values
  • Multi-field type support: text, select, multi-select, date ranges, number ranges, and booleans
  • Applied filter chips with quick-clear and individual remove buttons
  • Async server-side filtering mode for large datasets
  • Available in both Radix UI and Base UI headless primitives
  • CLI installation compatible with the shadcn/ui copy-and-own model

Pricing

Freemium. Free open-source components; Pro all-access blocks from $249 lifetime

Details

Type
Web app
Category
Development
Topic
UI Components
Open source
Yes
Platforms
Web, Code library
For
React and Next.js developers building data-dense apps, admin panels, and dashboards
Tags
shadcn, react, tailwind, tanstack table, components, data table

Why it was saved

  • @alibey_10, 5 November 2025: Ready-made, polished filter bar for data-dense apps: typed fields (text, select, date, number), per-type operators, searchable field picker grouped by category, installable via shadcn CLI and openable in v0.

Related

  • shadcn/ui

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated