Vite + React Setup

Step-by-step guide to set up Ninna UI in a Vite + React project with Tailwind CSS v4. Best choice for single-page applications.

Prerequisites

Node.js 18+
Vite 6+ with @vitejs/plugin-react
Tailwind CSS v4

Create Project

Skip this step if you already have a Vite + React project.

npm create vite@latest my-app -- --template react-ts
cd my-app

Install Ninna UI

Install the component packages you need. All packages auto-install @ninna-ui/core.

pnpm add @ninna-ui/primitives @ninna-ui/feedback @ninna-ui/forms @ninna-ui/layout

You can also install individual packages later — e.g. @ninna-ui/overlays, @ninna-ui/navigation, @ninna-ui/data-display.

Install Tailwind CSS

Vite uses the @tailwindcss/vite plugin for zero-config Tailwind integration.

pnpm add

pnpm add -D tailwindcss @tailwindcss/vite

Configure Vite

Add the Tailwind CSS plugin to your Vite config.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

CSS Setup

Replace the contents of your global CSS file.

In src/index.css:

@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";

@variant dark (&:is(.dark *));

Then add data-theme to your index.html:

<html lang="en" data-theme="default">

The theme preset automatically includes all utility classes used by Ninna UI components — no @source directive needed.

Your First Component

Verify the setup by rendering a Ninna UI component.

import { Button, Heading, Text } from "@ninna-ui/primitives";

function App() {
  return (
    <div className="p-8">
      <Heading as="h1" size="3xl">Hello Ninna UI</Heading>
      <Text className="text-base-content/70 mt-2">It works!</Text>
      <Button color="primary" className="mt-4">Click me</Button>
    </div>
  );
}

export default App;

Theme Presets

Switch themes by changing the CSS import and the data-theme attribute.

/* 1. Change the CSS import */
/* Default — Electric purple + magenta */
@import "@ninna-ui/core/theme/presets/default.css";

/* Ocean — Blue + cyan */
@import "@ninna-ui/core/theme/presets/ocean.css";

/* Sunset — Orange + rose */
@import "@ninna-ui/core/theme/presets/sunset.css";

/* Forest — Green + amber */
@import "@ninna-ui/core/theme/presets/forest.css";

/* Minimal — Monochrome */
@import "@ninna-ui/core/theme/presets/minimal.css";

/* 2. Update data-theme in index.html */
/* <html lang="en" data-theme="ocean"> */

Dark mode works automatically via prefers-color-scheme or by adding the .dark class to <html>. The data-theme attribute is required for theme variables to activate.