xiry.

Development · Web app

Filters (by Andrew Luo)

Linear-inspired React component for adding and editing sentence-style filter tokens

From the Xiry library · Updated 10 October 2026

Visit 21st.dev ↗

Filters is an open-source React UI component hosted on 21st.dev that replicates Linear's sentence-style filtering bar. It combines popovers, command search palettes, and token chips with operators like 'is' or 'is not' to build complex query builders. Developers can drop the code directly into Tailwind CSS and shadcn/ui setups.

What it's for

  • Build issue-tracker or task-management filtering bars similar to Linear
  • Add multi-attribute search and filtering to SaaS data tables
  • Provide sentence-style token filtering with toggleable inclusion and exclusion operators

Features

  • Linear-style filter chips that read as natural sentences
  • Nested command palette with categorized search and option groups
  • Toggleable operators such as 'is', 'is not', and 'before'
  • Multi-select support that collapses into summary counts
  • Height animation transitions between filter menus using Motion
  • Per-filter removal buttons and a global Clear button

Pricing

Open source. Free (MIT License)

Details

Type
Web app
Category
Development
Topic
UI Components
Open source
Yes
Platforms
Web
For
React and Next.js frontend developers using Tailwind CSS and shadcn/ui
Tags
react, shadcn ui, tailwind css, filters, linear style, ui components

Why it was saved

  • @korablev, 25 February 2025: Ready-to-use UI component for building Linear-style token filters: field/value chips with is/is-not operators, searchable dropdown option lists with icons and colors, multi-select with "2 selected" summary, per-chip remove and a Clear button.

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