Introduction

Full React UI library with zero runtime theming and native Tailwind CSS v4 support. 69 accessible components, 5 theme presets, oklch colors, Radix-powered accessibility, and data-slot CSS API.

Overview

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

Ninna UI is a full React UI library with zero runtime styling and native Tailwind CSS v4 support. Built with React 19, TypeScript strict, and Tailwind CSS v4.1, it delivers 69 production-ready, accessible components across 12 packages. The entire theme system runs on pure CSS custom properties with oklch perceptual colors - no JavaScript runtime, no providers, no hydration cost.

Switch between 5 built-in theme presets with a single CSS import. Dark mode works automatically viaprefers-color-schemeor manual .dark class toggling. Every component uses data-slot attributes (98 total) for surgical CSS customization without touching component internals. Complex interactive components are powered by Radix UI internally - but Radix types never leak into your code.

Why Ninna UI

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

One CSS import - instant design system

A single CSS import gives you a complete design system - semantic colors, surface scale, dark mode, and all component styles. No configuration files, no token setup, no providers.

69 accessible, production-ready components

Every component ships with WCAG 2.1 AA compliance, keyboard navigation, focus management, and screen reader support. Accessibility is enforced by automated vitest-axe audits.

Radix accessibility, zero API leakage

Complex interactive components - Select, Modal, Tabs, Accordion, Switch - are powered by Radix UI internally. Your code never imports or types against Radix.

Zero JavaScript theming overhead

All theming is pure CSS custom properties with oklch perceptual colors. No providers, no context, no Emotion, no styled-components. Instant theme switching with zero re-renders and zero hydration cost.

Tailwind CSS v4 native - CSS-first

Built from the ground up for Tailwind v4.1. Pure CSS configuration - no tailwind.config.ts, no PostCSS plugins for theming. Full tree-shaking via automated @source inline() safelisting.

98 data-slot attributes for surgical CSS

Target any component internal element with plain CSS selectors - no component forks, no prop drilling, no !important hacks. The styling API that shadcn/ui inspired, fully productized.

Packages

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

@ninna-ui/primitives14 components

Essential building blocks - Button, Badge, Avatar, Heading, Text, Link, Code, Kbd, Divider, and more.

@ninna-ui/feedback8 components

User feedback - Alert, Toast with promise support, Progress, Loading, Skeleton, Status, EmptyState.

@ninna-ui/forms17 components

Complete form toolkit - Input, Select, Checkbox, Switch, RadioGroup, Slider, FileUpload, Field, and more.

@ninna-ui/layout10 components

Responsive layout primitives - Box, Stack, Flex, Grid, Container, Center, SimpleGrid, AspectRatio.

@ninna-ui/overlays5 components

Accessible overlays with focus trapping - Modal, Drawer, Popover, Tooltip, DropdownMenu.

@ninna-ui/navigation5 components

Navigation patterns - Tabs, Accordion, Breadcrumbs, Pagination, Stepper.

@ninna-ui/data-display7 components

Data visualization - Card, Stat, Table, DataTable, Timeline, Tree, Calendar.

@ninna-ui/code-block1 component

Lightweight syntax highlighter - no Prism or Shiki dependency, copy-to-clipboard, auto dark mode.

@ninna-ui/corefoundation

Design system engine - TypeScript tokens, Tailwind class mappings, 5 CSS theme presets with oklch colors.

@ninna-ui/cliscaffolding

Zero-config project scaffolding - 3 framework templates with theme selection.

Features

What makes Ninna UI stand out.

8 Semantic Colors + oklch

Primary, secondary, accent, neutral, success, danger, warning, info - oklch perceptual colors with auto-generated content contrast colors and guaranteed WCAG AA.

5 Component Variants

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

TypeScript Strict + Full JSDoc

Every component is fully typed with JSDoc on every exported prop. IntelliSense documentation built in - zero any in the public API.

Zero-Runtime Dark Mode

Dark mode via CSS custom properties - no dark: classes needed anywhere. Automatic via prefers-color-scheme or manual via .dark class.

Radix-Powered Accessibility

WCAG 2.1 AA compliance on every component. Complex widgets use Radix internally - zero Radix API leakage into your code. 700+ automated tests.

data-slot CSS Override API

98 named data-slot attributes across all components. Target any inner element with plain CSS - no !important hacks, no component forks.

Design Philosophy

The principles behind Ninna UI.

CSS-First Theming - No Runtime Cost

One CSS import for a complete design system. No providers, no context wrappers, no JavaScript configuration. Pure CSS custom properties - instant switching, zero re-renders, zero hydration cost.

Chakra-Level Quality, DaisyUI-Simple Theming

Every component ships with forwardRef, displayName, data-slot, cn() class merging, WCAG 2.1 AA accessibility, and comprehensive TypeScript props - built to the highest standard.

Radix Isolation Architecture

11 Radix primitives wrapped behind clean TypeScript engine interfaces in @ninna-ui/react-internal. Your code never imports Radix, never types against Radix, never manages Radix peer dependencies.

12 Tree-Shakeable Packages

Each package is independently installable with ESM-only, sideEffects-free exports. Only the components you import end up in your bundle - no monolithic runtime.

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>
  );
}