Filter bar

component

A wrapping row of FilterPills — the active-filters strip above an inventory/collection grid.

Install

npx shadcn@latest add @engram/filter-bar

Registry item: /r/filter-bar.json — the machine-readable definition agents install from.

Example

Props

api

FilterBar

Prop	Type	Default	Description
`onClear`	`() => void`	`—`	Optional "clear all" handler; renders a trailing clear button.

FilterPill

Prop	Type	Default	Description
`label`*	`ReactNode`	`—`	Pill text.
`active`	`boolean`	`false`	Whether the toggle is on (tinted) — for filter toggles.
`onToggle`	`() => void`	`—`	Toggle handler; when set the body is a button.
`onRemove`	`() => void`	`—`	Remove handler; when set a trailing × button is shown (removable chips).
`count`	`number \| string`	`—`	Right-aligned count (e.g. matches under this filter).
`tone`	`ChipTone`	`"accent"`	Active tone color. Defaults to accent.
`className`	`string`	`—`	—

Composition

pulled in on install

filter-barcomponent
- chipatom

Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.