Installation

Install published @var-ui/* packages from npm. For the copy-paste Vite + React path, start with Getting started.

Packages

Package	Role
`@var-ui/core`	Tokens, recipes, published CSS (`@var-ui/core/styles.css`), and extract entry (`@var-ui/core/styles`)
`@var-ui/react`	React components
`@var-ui/icons`	Optional default glyphs for `IconProvider`
`@var-ui/astro`	Astro components (no React)
`@var-ui/form`	Form state and validation
`@var-ui/cli`	Dev dependency: `npx @var-ui/cli` for component lookup, search, and `init`

@var-ui/icons is optional. Without it, pass icons={{}} to IconProvider.

Peer dependencies

Peer	Notes
`react` / `react-dom`	19
`react-aria-components`	Required by `@var-ui/react`
`@internationalized/date`	Required when using date components

typestyles is a transitive dependency of @var-ui/core. Do not add it unless you extract CSS (below) or import TypeStyles directly.

Advanced: extract CSS

Use this path for custom createDesignTheme modules, app-owned recipes, or tree-shaken CSS. Do not import @var-ui/core/styles.css in the same app — that doubles the stylesheet.

pnpm add typestyles
pnpm add -D @typestyles/vite

// typestyles-entry.ts
import '@var-ui/core/styles';

import typestyles from '@typestyles/vite';

export default {
  plugins: [typestyles({ extract: { modules: ['typestyles-entry.ts'] } })],
};

This monorepo

This repository still links packages with workspace:*. Downstream apps install the published versions from npm and do not use the workspace protocol.