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.
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.