Filters - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation/filters

import {
  Filters,
  type Filter,
  type FilterFieldConfig,
  createFilter,
} from "@/components/ui/filters"

<Filters filters={filters} fields={fieldConfig} onChange={setFilters} />

Solid variant with blue chips.

Full border radius.

Size variants.

Prop	Type	Default	Description
`filters`*	`Filter[]`	—	Array of active filters.
`fields`*	`FilterFieldsConfig[]`	—	Filter configuration for available filter options.
`onChange`*	`(filters: Filter[]) => void`	—	Callback when filters change.
`variant`	`'solid' \| 'outline'`	—	Visual style variant.
`size`	`'sm' \| 'md' \| 'lg'`	—	Size of filter chips.
`radius`	`'md' \| 'full'`	—	Border radius variant.
`showAddButton`	`boolean`	—	Show the add filter button.

Assignee

Status

Showing results matching 2 filters

pnpm dlx shadcn@latest add @saturation/filters

import {
  Filters,
  type Filter,
  type FilterFieldConfig,
  createFilter,
} from "@/components/ui/filters"

<Filters filters={filters} fields={fieldConfig} onChange={setFilters} />

Status

Solid variant with blue chips.

Status

1 filter active

Full border radius.

Small

Status

Medium (default)

Status

Large

Priority

Size variants.

Prop	Type	Default	Description
`filters`*	`Filter[]`	—	Array of active filters.
`fields`*	`FilterFieldsConfig[]`	—	Filter configuration for available filter options.
`onChange`*	`(filters: Filter[]) => void`	—	Callback when filters change.
`variant`	`'solid' \| 'outline'`	—	Visual style variant.
`size`	`'sm' \| 'md' \| 'lg'`	—	Size of filter chips.
`radius`	`'md' \| 'full'`	—	Border radius variant.
`showAddButton`	`boolean`	—	Show the add filter button.