Start · Application setup

Installation

Install managed packages for routine upgrades, or copy registry source when your application needs structural control.

Use the package by default

Install @lenso/ui when you want versioned upgrades and precompiled StyleX output. Import @lenso/tokens/styles.css and @lenso/ui/styles.css once from the application shell.

Copy source only when you need it

Install a registry item when your application must change component structure or own a Recipe. Registry files become application code and do not receive package updates automatically.

Install the package channel

Install the React and Base UI peers.

pnpm add @lenso/ui @lenso/tokens @base-ui/react react react-dom

Load the styles

Load each generated stylesheet once at the application entry or root layout.

import "@lenso/tokens/styles.css";
import "@lenso/ui/styles.css";

Install registry source

The setup item adds the shared token bridge. Every component item is copied into your application as editable source.

pnpm dlx shadcn@latest add https://ui.lenso.dev/r/setup.json
pnpm dlx shadcn@latest add https://ui.lenso.dev/r/button.json

Before copying registry source

Configure a compatible StyleX compiler in your application.
Keep the generated token CSS import in the application shell.
Use a versioned registry URL when a build must resolve the same source later.

Optional packages

Install @lenso/primitives directly only when you need the headless Sidebar primitive.
@lenso/ui/preflight.css is optional and is not a reset or font package.