Experience System
Components

Phone Input

Registry

Phone number input using Input from @by/experience-system and a phone icon from @by/icons.

Phone number input using Input from @by/experience-system and phone icon from @by/icons.

After shadcn add, import PhoneInput from your generated UI path (for example @/components/ui/phone-input).

Store raw digits in state and derive the formatted display value from that state.

Installation

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

pnpm dlx shadcn@latest add @by-es/phone-input

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.

Pagination

Navigate multi-page lists with previous/next controls, numbered links, and ellipsis.

Popover

A floating panel anchored to a trigger, opened by click—compact forms, confirmations, and contextual actions.

On this page

Installation