Filters

cubby-ui/filters

FreeComponent

A filter bar of segmented pills with per-field operators and value controls.

Live preview

live · rendered by the registry

Rendered by cubby-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://cubby-ui.dev/r/filters.json

Source

registry/default/filters/filters.tsxcubby-ui.dev/r/filters.json · first 6 KB

1"use client";
2
3import * as React from "react";
4
5import { cn } from "@/lib/utils";
6import { Badge } from "@/registry/default/badge/badge";
7import { Button } from "@/registry/default/button/button";
8import {
9  ButtonGroup,
10  ButtonGroupText,
11} from "@/registry/default/button-group/button-group";
12import {
13  Combobox,
14  ComboboxItem,
15  ComboboxTrigger,
16} from "@/registry/default/combobox/combobox";
17import {
18  DropdownMenu,
19  DropdownMenuContent,
20  DropdownMenuRadioGroup,
21  DropdownMenuRadioItem,
22  DropdownMenuTrigger,
23} from "@/registry/default/dropdown-menu/dropdown-menu";
24import { Kbd } from "@/registry/default/kbd/kbd";
25import { useControllableState } from "@/registry/default/hooks/use-controllable-state";
26
27import { HugeiconsIcon } from "@hugeicons/react";
28import { Cancel01Icon, PlusSignIcon } from "@hugeicons/core-free-icons";
29
30import {
31  FilterChipContext,
32  FiltersActionsContext,
33  FiltersAutoOpenContext,
34  FiltersStateContext,
35  useFilterChip,
36  useFiltersActions,
37  useFiltersAutoOpen,
38  useFiltersState,
39} from "./filters-context";
40import { FilterChipValue, FilterSearchPopup } from "./filters-value-controls";
41import {
42  createFilter,
43  describeFilter,
44  FILTER_SIZES,
45  patchFilter,
46  resolveOperators,
47} from "./lib/filters-utils";
48import type {
49  FilterChipProps,
50  FilterField,
51  FiltersBarProps,
52  FiltersLabels,
53  FiltersProps,
54  FiltersProviderProps,
55  FilterValue,
56} from "./lib/filters-types";
57
58const DEFAULT_LABELS: FiltersLabels = {
59  add: "Add filter",
60  clear: "Clear",
61  searchFields: "Filter...",
62  searchValues: "Search...",
63  noFields: "No filters found.",
64  noResults: "No results found.",
65  selectValue: "Select...",
66  enterValue: "Enter value",
67  value: "Value",
68  min: "Min",
69  max: "Max",
70  operator: "operator",
71  removeFilter: (fieldLabel) => `Remove ${fieldLabel} filter`,
72};
73
74const LABEL_KEYS = Object.keys(DEFAULT_LABELS) as (keyof FiltersLabels)[];
75
76/** Small muted wrapper that normalizes field icons to 14px. */
77function FieldIcon({ children }: { children?: React.ReactNode }) {
78  if (!children) return null;
79  return (
80    <span className="text-muted-foreground flex shrink-0 items-center [&_svg]:size-3.5!">
81      {children}
82    </span>
83  );
84}
85
86/**
87 * Moves focus to the adjacent chip's remove button (or the add-filter trigger)
88 * before a chip is removed, so focus never falls to `<body>`.
89 */
90function focusAdjacentChip(chip: HTMLElement | null) {
91// … truncated

What it pulls in

npm packages

@hugeicons/react
@hugeicons/core-free-icons

Other registry items

@cubby-ui/badge
@cubby-ui/button
@cubby-ui/button-group
@cubby-ui/combobox
@cubby-ui/dropdown-menu
@cubby-ui/kbd
@cubby-ui/input
@cubby-ui/use-controllable-state

Files it writes

registry/default/filters/filters.tsx
registry/default/filters/lib/filters-types.ts
registry/default/filters/lib/filters-utils.ts
registry/default/filters/filters-context.tsx
registry/default/filters/filters-value-controls.tsx

More from cubby-ui

All 79 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Accordionaccordion	cubby-ui	Components	Free	2 deps
Alertalert	cubby-ui	Components	Free	1 dep
Alert-dialogalert-dialog	cubby-ui	Components	Free	2 deps
Aspect-ratioaspect-ratio	cubby-ui	Components	Free	no deps
Autocompleteautocomplete	cubby-ui	Components	Free	2 deps
Avataravatar	cubby-ui	Components	Free	1 dep
Badgebadge	cubby-ui	Components	Free	1 dep
Base Drawerbase-drawer	cubby-ui	Components	Free	2 deps