Experience System
Components

Search

Registry

Search input with a clear button using InputGroup from @by/experience-system.

Search input with clear button using InputGroup from @by/experience-system.

After shadcn add, import Search from the path your registry aliases map to (often @/components/ui/search).

Installation

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

pnpm dlx shadcn@latest add @by-es/search

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.

Scroll Area

Styled scrollbars for tight layouts—use sparingly when native scrolling is not enough.

Segment Input

Numeric segment input with spinbutton semantics — used as the building block for date and time pickers.

On this page

Installation