Filter toolbar

Keep collection filters close and easy to reset.

npx shadcn@latest add @silicon-ui/filter-toolbar
datafilter
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/filter-toolbar

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/filter-toolbar/filter-toolbar.tsx
    • components/silicon-ui/filter-toolbar/filter-toolbar.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { FilterToolbar } from "@/components/silicon-ui/filter-toolbar/filter-toolbar";

API reference

FilterToolbar

PropTypeDefault
filters*FilterChip[]—
onRemove*(id: string) => void—
onClearAll() => void—
childrenReactNode—
labelstring"Active filters"
addFilter

Adds an Add filter trigger that morphs into a two step field and value menu.

{ fields: FilterField[]; onAdd: (filter: FilterChip, field: FilterField) => void; label?: string; align?: "start" | "end" }—

FilterMenu

PropTypeDefault
fields*FilterField[]—
onSelect*

Receives a chip whose id is the field id, so a second pick for a field replaces the first.

(filter: FilterChip, field: FilterField) => void—
active

Applied filters. Each field shows its current value and the value step marks it.

FilterChip[][]
labelstring"Add filter"
align

The trigger edge the panel lines up with. It flips or shifts when the viewport, or a clipping ancestor, has no room.

"start" | "end""end"

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens