Skip to main content
ninna-ui
Vite

Vite Component Library

Ninna UI is the best Tailwind CSS v4 component library for Vite projects. 69 accessible React components, CSS-only theming, and zero runtime overhead.

Vite

Vite is a modern frontend build tool that provides an extremely fast development experience. With instant Hot Module Replacement (HMR), native ES modules, and optimized builds via Rollup, it's the preferred build tool for modern React applications.

Vite + Ninna UI

Here's why Ninna UI is the perfect component library for your Vite project:

Instant HMR for CSS theme changes — swap theme presets and see results in milliseconds.

Optimized Vite builds — tree-shaking removes unused components automatically.

Tailwind CSS v4 uses Vite internally — Ninna UI's CSS-first approach is perfectly aligned.

No special Vite plugins needed — just CSS imports and React components.

Compatible with Vite's SSR mode and library mode.

Install Tailwind CSS and Ninna UI for Vite

Setting up Ninna UI with Vite takes just a few minutes.

1

Install Ninna UI in your Vite + React project:

npm install @ninna-ui/core @ninna-ui/primitives @ninna-ui/forms @ninna-ui/layout
2

Add theme import to your main CSS (src/index.css):

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

Use components in your Vite app:

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


export function App() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center space-y-4">
        <Heading as="h1" size="4xl">Hello, Ninna UI</Heading>
        <Button color="primary">Get Started</Button>
      </div>
    </div>
  );
}

Example

Here's what a Vite app looks like with Ninna UI — clean, minimal, no wrappers:

// vite.config.ts — no special config needed
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";


export default defineConfig({
  plugins: [react()],
  // That's it! No Ninna UI plugin required.
});

69 components available

Ninna UI provides a comprehensive set of React components organized into focused packages:

@ninna-ui/primitives

Button, Heading, Text, Badge, Code, Kbd, Avatar

@ninna-ui/forms

Input, Select, Checkbox, Radio, Switch, Slider, Textarea

@ninna-ui/layout

Box, VStack, HStack, Container, Center, Grid, Separator

@ninna-ui/navigation

Tabs, Accordion, Breadcrumb, Pagination, Steps

@ninna-ui/data-display

Card, Table, DataTable, Stat, Timeline, Calendar, Tree

@ninna-ui/feedback

Alert, Toast, Progress, Skeleton, Loading, EmptyState

Browse all components

Start building with Vite + Ninna UI

One CSS import, zero JavaScript config. Get started in under 60 seconds.

Install Guide Browse Examples

Ninna UI for other frameworks

React Component Library

Next.js Component Library

React Router Component Library

Remix Component Library

Compare UI Libraries

Learn more about Vite