Filters - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/filters

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

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

Examples

Solid Style

Solid variant with blue chips.

Radius Full

Full border radius.

Sizes

Size variants.

API Reference

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

Installation

pnpm dlx shadcn@latest add @saturation-ui/filters

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

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

Examples

Solid Style

Status

Solid variant with blue chips.

Radius Full

Status

1 filter active

Full border radius.

Sizes

Small

Status

Medium (default)

Status

Large

Priority

Size variants.

API Reference

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.