brand-ui — ProcessFilterBar

import { ProcessFilterBar } from "@elabs-ai/components-process";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-process

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui ProcessFilterBar component (from @elabs-ai/components-process) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look ProcessFilterBar up before writing code: `npx -y @elabs-ai/components-cli docs ProcessFilterBar` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-process is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-process` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-process`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Examples

4 live examples

Filter Chain

A three-intent chain — the breadcrumb reading this component exists for. Each chip's "excluded N" is the MARGINAL count that one intent removes on top of the ones before it, never the whole chain's total.

With Abstraction Hidden

The chain plus a busy abstraction — the summary line states both clauses at once.

Empty

No active intents: the chip row and its "Clear all" action render nothing at all — the summary line is the only thing left, and it reads as "showing everything".

API

`ProcessFilterBar`

Prop	Type	Description
`intents`required	`FilterIntent[]`	The active filter chain — `useProcessExplorer`'s own `intents`, in order.
`excludedByIntent`required	`number[]`	How many cases EACH intent alone excludes, parallel to {@link intents} (same index) — `useProcessExplorer`'s own additive `excludedByIntent` field.
`totalCases`required	`number`	The unfiltered case count — the right half of the summary line's "X of Y".
`filteredCases`required	`number`	`useProcessExplorer`'s `kpis.cases` — the left half of the summary line's "X of Y".
`hiddenCounts`	`{ activities: number; paths: number }`	What abstraction currently hides — `useProcessExplorer`'s own `hiddenCounts`.
`label`	`string`	Accessible name for the chip row. Default from locale.

Also accepts: Omit<HTMLAttributes<HTMLDivElement>, "children">