# Filters (by Andrew Luo)

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

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.

Website: https://21st.dev/andrewlu0/filters

## What it is 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](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- 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](https://x.com/korablev/status/1894354141364813920): 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](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/filters-by-andrew-luo

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.