# Installation

Install published `@var-ui/*` packages from npm. For the copy-paste Vite + React path, start with [Getting started](/docs/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.

```bash
pnpm add typestyles
pnpm add -D @typestyles/vite
```

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

```ts
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.