Component quality meets theming simplicity.

68 components. 5 themes. One CSS import. React 19 + Tailwind v4.

Get Started

68+ Components

Primitives, forms, layout, overlays, navigation, data display, and more.

5 Theme Presets

Default, Ocean, Sunset, Forest, Minimal. One CSS import to switch.

Zero-Config Dark Mode

CSS variables with oklch color space. Automatic light/dark adaptation.

WCAG 2.1 AA

Keyboard navigation, ARIA attributes, focus management built in.

React 19 + Tailwind v4

ESM-only, TypeScript strict, tree-shakeable. Vite, Next.js, React Router.

CLI Scaffolding

npx @ninna-ui/cli init my-app — project setup in seconds.

Overview

Ninna UI is a modern React component library built for production — accessible, themeable, and modular by design.

Built with React 19, TypeScript, and Tailwind CSS v4, Ninna UI provides 64+ production-ready components across 8 packages. The entire theme system is driven by CSS variables — no complex token management, no JavaScript runtime for styling.

Switch between 5 built-in themes with a single CSS import. Dark mode works automatically viaprefers-color-schemeor class-based toggling. Every component uses data-slot attributes for deep CSS customization without touching component internals.

Why Ninna UI

The principles that make Ninna UI the right choice for production React applications.

One import, complete theme

A single CSS import gives you a full design system — colors, surfaces, dark mode, and all component styles. No configuration files, no token setup.

64+ production-ready components

Every component ships with proper ARIA attributes, keyboard navigation, focus management, and screen reader support. Accessibility is not an afterthought.

Radix primitives under the hood

Complex interactive widgets — Select, Checkbox, Radio, Switch, Slider, Tabs, Accordion — are built on battle-tested Radix UI primitives.

Zero JS runtime for theming

All theming is pure CSS variables. No JavaScript theme provider, no Emotion, no styled-components. Instant theme switching with zero re-renders.

Tailwind CSS v4 native

Built from the ground up for Tailwind v4. CSS-first configuration, @theme inline tokens, and full tree-shaking via @source directives.

data-slot deep customization

98 data-slot attributes across all components. Target any internal element with plain CSS — no component forks, no prop drilling.

Packages

Ninna UI is split into focused packages — install only what you need.

@ninna-ui/primitives14 components

Button, Badge, Avatar, Heading, Text, Link, Divider, Code, Kbd, and more.

@ninna-ui/feedback8 components

Alert, Toast, Progress, Loading, Skeleton, Status, EmptyState, CircularProgress.

@ninna-ui/forms17 components

Input, Select, Checkbox, Switch, Radio, Slider, FileUpload, Field, and more.

@ninna-ui/layout10 components

Box, Stack, Flex, Grid, Center, Container, Wrap, SimpleGrid, AspectRatio, Separator.

@ninna-ui/overlays5 components

Modal, Drawer, Popover, Tooltip, DropdownMenu.

@ninna-ui/navigation5 components

Tabs, Accordion, Breadcrumbs, Pagination, Stepper.

@ninna-ui/data-display7 components

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

@ninna-ui/code-blockoptional

Syntax-highlighted CodeBlock component with copy-to-clipboard and dark mode.

@ninna-ui/coreauto-installed

Types, tokens, color maps, 5 built-in themes. Auto-installed as a direct dependency of all component packages.

@ninna-ui/cliscaffolding

npx @ninna-ui/cli init — scaffold a project with templates and themes.

Features

What makes Ninna UI stand out.

8 Semantic Colors

Primary, secondary, accent, neutral, success, danger, warning, info — each with auto-generated content contrast colors.

5 Component Variants

Solid, soft, outline, ghost, and text variants on interactive components. Consistent across all packages.

TypeScript First

Every component is fully typed. All props, variants, colors, and sizes get IntelliSense out of the box.

Zero-Config Dark Mode

Dark mode via CSS variables. No dark: classes needed — the theme handles everything.

Accessibility Built-in

ARIA attributes, keyboard navigation, focus management, and screen reader support on every component. Radix primitives for complex widgets.

data-slot Styling

98 data-slot attributes across all components. Target any inner element with CSS without modifying component code.

Design Philosophy

The principles behind Ninna UI.

CSS-First Theming

One CSS import for a complete theme. No token configuration files, no JavaScript theme providers required. Just CSS variables — instant switching, zero re-renders.

Production-Grade Components

Every component ships with proper accessibility, keyboard navigation, compound patterns, and comprehensive TypeScript props — built to the highest standard.

Radix Under the Hood

Complex interactive components (Select, Checkbox, Radio, Switch, Slider) are built on Radix primitives for battle-tested accessibility and behavior.

Tree-Shakeable & Modular

Each package is independently installable with tree-shakeable exports. Only the components you import end up in your bundle.

Quick Start

Get up and running in under 2 minutes.

Option 1: CLI (Recommended)

Scaffold a complete project with your preferred framework and theme.

npx @ninna-ui/cli init my-app

Option 2: Manual Setup

Install packages and configure your CSS

import { Button, Heading, Text, Badge } from "@ninna-ui/primitives";
import { Alert } from "@ninna-ui/feedback";
import { Input, Field } from "@ninna-ui/forms";
import { VStack, HStack } from "@ninna-ui/layout";

export default function App() {
  return (
    <VStack gap={6} className="p-8">
      <Heading as="h1" size="3xl">Welcome</Heading>
      <Text className="text-base-content/70">Get started with Ninna UI.</Text>
      
      <HStack gap={3}>
        <Button color="primary">Get Started</Button>
        <Button variant="outline" color="primary">Learn More</Button>
      </HStack>

      <Alert color="info" variant="soft">
        All components support 8 semantic colors and 5 variants.
      </Alert>
    </VStack>
  );
}