Powerful and customizable React filter bar components built for modern applications and websites. These filter bars are built using React Aria and styled with Tailwind CSS.
Installation
You can add this filter bar component using our CLI or manually:
npx untitledui@latest add filter-bar
Filter bar examples
Below are examples and variations of this filter bar component:
Tabs and search
Our filter bar component works seamlessly with tab navigation. This variant combines tabs for quick category switching with a search input for filtering within each category.
Date filters
The date filters variant provides multiple ways to select time ranges, including quick-select buttons for common periods, a dropdown for additional options, and a date range picker for custom selections.
Advanced filter inactive
The advanced filter variant provides a query builder-style interface with field, operator, and value inputs. This allows users to create complex filter combinations for data-heavy applications.
Advanced filter active
This example shows the advanced filter with multiple active filter rows. Each row can be individually configured with a field, operator, and value, and removed with the close button.
Filter dropdown menus
Filter slideout menus
FAQs
Please refer to our frequently asked questions page for more.
A filter bar consists of FilterBar.Root (layout container), FilterBar.Content (left content area), FilterBar.Actions (right actions area), FilterBar.FilterRow (advanced filter row), and FilterBar.FilterIconButton (icon-only filter button).
Use FilterBar.FilterRow components to create rows with field, operator, and value inputs. Each row accepts an onRemove callback for deletion. Combine with Select components for field and operator selection, and Input for value entry.
Yes, the filter bar is designed to work with other components like Tabs, Input, Select, and DateRangePicker. Place them inside FilterBar.Content for left-aligned elements or FilterBar.Actions for right-aligned actions.
Yes, FilterBar.Content uses flexbox wrapping to handle responsive layouts. The demos include responsive breakpoints that adapt the layout for mobile and desktop viewports.
Place an Input component with a search icon inside FilterBar.Content. The filter bar layout will automatically handle spacing and alignment with other filter elements.