Filter Bar

Ready

Search, filters, and view controls in one row.

Installation

$ npx @oratiq-js/ui add filter-bar

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

import

import { FilterBar, FilterBarSpacer, FilterChip } from "@/components/ui/filter-bar";

The bar is role=toolbar; compose it from Input, Select, and buttons.
FilterChip shows an applied filter as label: value with a labelled remove button.
FilterBarSpacer pushes what follows to the end edge — logical, so it flips under RTL.
The row wraps on small screens instead of overflowing.

Prop	Type	Default	Description
`label`*	`string`	—	The filter's name.
`value`*	`ReactNode`	—	The applied value (dir=auto).
`onRemove`	`() => void`	—	Shows the remove button.

View source on GitHub → components/ui/filter-bar.tsx