# Installation

Add @zenoxai/ui to a React application with Tailwind CSS v4.

## Requirements

- React 19
- Tailwind CSS 4.1 or later, with the Vite plugin or PostCSS
- `lucide-react` 1.x for icons
- `recharts` 3.x, only if you use the chart components

## 1. Install the package

The package is published to the Zenox private registry. Point the `@zenoxai` scope at it once,
in the project's `.npmrc`:

```ini
@zenoxai:registry=<the Zenox npm registry URL>
```

Then install:

```bash
pnpm add @zenoxai/ui lucide-react
```

## 2. Import the styles

In the stylesheet where the app imports Tailwind, import the library right after it:

```css
@import "tailwindcss";
@import "@zenoxai/ui/styles.css";
```

`styles.css` brings the tokens, the dark variant and the animation utilities, and tells
Tailwind to scan the library's sources so the classes its components use are generated.

## 3. Load the fonts

Import the font files from the application's JavaScript entry, **not** from a stylesheet:

```tsx
// src/main.tsx
import "@zenoxai/ui/fonts.css"
import "./globals.css"
```

Tailwind inlines CSS `@import`s without rewriting the URLs inside them, so importing the fonts
from CSS emits no font files and the page silently falls back to the system font. Imported from
JavaScript, the bundler handles the files. To confirm it worked, check that
`document.fonts.size` is greater than zero in the browser console.

## 4. Mount the app-level pieces

```tsx
import { Toaster } from "@zenoxai/ui/components/sonner"
import { TooltipProvider } from "@zenoxai/ui/components/tooltip"
import { ConfirmDialogHost } from "@zenoxai/ui/patterns/confirm-dialog"

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <TooltipProvider>
      {children}
      <Toaster />
      <ConfirmDialogHost />
    </TooltipProvider>
  )
}
```

## 5. Use a component

```tsx
import { Button } from "@zenoxai/ui/components/button"

export function SaveButton() {
  return <Button>Save changes</Button>
}
```

Every component and pattern is also exported from the package root
(`import { Button } from "@zenoxai/ui"`). Both forms are tree-shaken.

## Dark mode

Dark mode follows the `.dark` class on `<html>`. Any theme manager that sets that class works;
see [Dark mode](/foundations/dark-mode).