Installation

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:

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

Then install:

pnpm add @zenoxai/ui lucide-react

2. Import the styles

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

@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:

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

Tailwind inlines CSS @imports 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

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

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.