Getting started

Installation

Novix UI works with any Vite, Next.js, or TanStack Start project. Install the package, wrap your app with ThemeProvider, and import the styles.

Install the package

Novix UI is a single tree-shakable package. Pick your package manager.

Import the stylesheet

Nova ships a single CSS entry with the design tokens, keyframes, and signature utilities. Import it once at the root of your app.

src/main.tsx

import "@novix-ui/react/styles.css";

Wrap your app with ThemeProvider

ThemeProvider handles light, dark, and system mode with persistence and OS sync out of the box. It renders nothing — just wire it once near the root.

src/App.tsx

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

Use a component

Every primitive is exported from the package root. Named exports keep tree shaking honest.

tsx

import { Button, Sparkles } from "@novix-ui/react";
 
export function CTA() {
  return (
    <Button leadingIcon={<Sparkles />}>
      Generate
    </Button>
  );
}

Requirements

React ≥ 18
TypeScript ≥ 5 (recommended)
Tailwind CSS v4 (peer)
Modern browsers (Chrome, Safari, Firefox, Edge)