Getting started

Quick start

From zero to a rendered Nova component in under two minutes. This guide assumes React 19, Tailwind v4, and a Vite or TanStack Start project.

1. Install

Add the Nova packages to your workspace.

tsx
npm install @novix-ui/react @novix-ui/tokens

2. Add tokens

Import Nova's OKLCH-based token system into your root stylesheet. It ships as pure CSS — zero JS runtime, zero cascade cost.

tsx
/* src/styles.css */
@import "tailwindcss";
@import "@novix-ui/tokens/theme.css";

3. Wrap in ThemeProvider

The provider handles system/light/dark, persistence, and the smooth theme cross-fade.

tsx
import { ThemeProvider } from "@novix-ui/react";
 
export default function App({ children }) {
return <ThemeProvider defaultTheme="system">{children}</ThemeProvider>;
}

4. Render your first component

That's it. Every Nova component is a one-line import.

Next steps