Experience System

Filter Chips

Registry

Toggleable filter chips built with Badge from @by/experience-system.

Interactive filter chips built with Badge state styling and click-to-toggle behavior for quick filtering workflows.

The live example uses a default chip set with an initial active item so you can see the toggle behavior immediately.

After shadcn add, import FilterChips from the path your registry aliases map to (often @/components/ui/filter-chips).

InventoryWarehouseAutomationPlanningTransportationAnalytics

Installation

Run the shadcn CLI with your package manager. It vendors the recipe into components/ui/filter-chips.tsx and installs the runtime dependencies (@by/experience-system) automatically:

pnpm dlx shadcn@latest add @by-es/filter-chips

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system. Configure the Registry in your app before adding recipes.

File Upload

Drag-and-drop or browse-based file selection with validation, optional image gallery, and preview dialog.

Form

Combine TanStack Form and Zod with Field, inputs, and related primitives from the experience system.

On this page

Installation