Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

FilterBar

A collection toolbar: search with a live result count, a Filters popover of facets with counts, and removable Field: Value chips.

CoreData Display@gaudi/design-system/core/FilterBarView in StorybookSource

The host owns matching and persistence.

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import FilterBar from '@gaudi/design-system/core/FilterBar';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/filters-all-in-one.json.

Usage

import FilterBar from '@gaudi/design-system/core/FilterBar';
<FilterBar query={query} onQueryChange={setQuery} facets={facets} />

Examples

One bar, every filter kind

Storybook

Controlled state, sizes and locales

Storybook

Custom value editors

Storybook

Nested groups edited in place

Storybook

Deep attribute menus for large libraries

Storybook

Filtering a table with nested groups

Storybook

API

15 props

Accessibility

Search has a visible or programmatic label. Each chip names its remove action; the facet popover uses tabs for categories (a labelled facet select on phones) and checkbox or radio rows for values. Truncated option labels keep their full text as a tooltip.

Notes

  • Filters is the compound query-builder export. Its examples cover nested groups, operators, asynchronous values and saved queries.
FieldField composes form label, description, error, and input building blocks.7 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesDataTableDataTable is a TanStack table with a compact data anatomy: shared headers that preserve label casing, hairline rows, synced column and row hover, a tinted wash for selected rows, and declarative column alignment, width and pinning. It adds search with a live count, single or multi-column sorting, selection with bulk actions, expandable rows, row action menus, pinned rows, grouped bands, a totals footer, sticky headers, automatic virtualization, pagination or load-more, CSV export, and loading, refreshing, empty and error states. Sorting, selection, expansion and pinning work controlled or uncontrolled.19 examplesToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesInputText, search, numeric and date inputs with prefix and suffix slots.11 examples