Filter components from Beste UI, design system primitives built with shadcn/ui and Tailwind CSS.
1–14 of 14
| Component | Title | Category | Install |
|---|---|---|---|
| filter-tree | Tree Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-tree |
| filter-toggle | Toggle Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-toggle |
| filter-swatch | Color Swatch Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-swatch |
| filter-slider | Range Slider Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-slider |
| filter-select | Select Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-select |
| filter-segmented | Segmented Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-segmented |
| filter-search | Search Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-search |
| filter-rating | Rating Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-rating |
| filter-range | Min/Max Range Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-range |
| filter-radio | Radio Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-radio |
| filter-multiselect | Multiselect Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-multiselect |
| filter-combobox | Combobox Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-combobox |
| filter-chips | Chips Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-chips |
| filter-checkbox | Checkbox Filter | Filter | npx shadcn add https://ui.beste.co/component/r/filter-checkbox |
Hierarchical checkbox tree for nested categories with expand/collapse rows. Checking a parent checks its whole subtree, and partially selected parents turn indeterminate.
Switch rows for boolean product flags like on-sale or in-stock. Multi-select, works controlled or uncontrolled.
Multi-select color circles for color filtering. Each option paints its own CSS color and stays accessible via screen-reader labels.
Two-thumb range slider with live numeric readouts and a commit callback, built for price ranges.
Single-select dropdown for long option lists that would crowd a sidebar. Supports a clear item, result counts, and a disabled state for dependent filters.
Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.
Text search input with a leading icon for keyword filtering. Debounce in the consumer if you fetch on change.
Star rows for minimum-rating filtering in the familiar n-and-up pattern. Clicking the active row clears the selection.
Paired number inputs for open-ended ranges: either side can stay empty, so users can filter by only a minimum or only a maximum.
Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.
Dropdown with checkbox rows and a selection-count badge. Keeps many-option filters compact in toolbars where a checkbox list would not fit.
Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.