Ninna UI v0.6.0

Full React UI library with zero runtime styling and native Tailwind CSS v4 support.

Current version: 0.6.0 — All @ninna-ui/* packages are at v0.6.0 on npm. Always install with @latest (e.g. pnpm add @ninna-ui/core@latest). Do NOT use 0.1.0 — it is an obsolete early release with a different API.

The open-source React component library that combines Chakra-level component quality with DaisyUI-simple theming - 69 accessible, production-ready components, 5 built-in theme presets, and zero JavaScript theming overhead. One CSS import. Instant design system.

Documentation → · npm → · GitHub → · Comparison →

Most component libraries force a trade-off: great components (Chakra, Mantine) or simple theming (DaisyUI). Ninna UI eliminates that choice - you get both, with zero configuration overhead.

• Tailwind CSS v4.1 native - Pure CSS-first configuration. No tailwind.config.ts, no PostCSS plugins, no build-step theming
• Zero JS runtime theming - All 5 themes are pure CSS custom properties. Switch themes with a single @import - no providers, no context, no hydration cost
• oklch color system - Perceptually uniform, high-chroma colors with automatic light/dark mode and guaranteed WCAG AA contrast
• Radix accessibility, zero Radix API leakage - Complex components (Select, Modal, Tabs, Accordion) are powered by Radix primitives internally. Your code never imports or types against Radix
• data-slot CSS override API - 98 named slots across all components for surgical styling without !important hacks
• React Server Components ready - Zero 'use client' directives. Every component works in RSC, SSR, and SPA out of the box
• TypeScript Strict with full JSDoc - Complete type safety, IntelliSense documentation on every prop, and zero any in the public API
• Tree-shakeable modular packages - 12 independently installable packages. Import only what you use - no monolithic bundle

In short: Ninna UI delivers the component depth and accessibility of Chakra/Mantine with the CSS-variable theming simplicity of DaisyUI - built natively on Tailwind CSS v4.

pnpm add @ninna-ui/core@latest @ninna-ui/primitives@latest

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

import { Button } from "@ninna-ui/primitives";
import { VStack } from "@ninna-ui/layout";

export function App() {
  return (
    <VStack gap="md">
      <Button color="primary" variant="solid">
        Get Started
      </Button>
      <Button color="secondary" variant="outline">
        Learn More
      </Button>
    </VStack>
  );
}

npx @ninna-ui/cli init my-app

Choose from Vite + React, Next.js 15, React Router v7, or Astro templates - pre-configured with your preferred theme preset, TypeScript strict mode, and all Ninna UI packages.

Switch your entire design system with a single CSS import - no JavaScript configuration, no provider wrappers, no build step:

@import "@ninna-ui/core/theme/presets/default.css"; /* Electric Purple / Magenta */
@import "@ninna-ui/core/theme/presets/ocean.css"; /* Cool Blue / Cyan */
@import "@ninna-ui/core/theme/presets/sunset.css"; /* Warm Orange / Rose */
@import "@ninna-ui/core/theme/presets/forest.css"; /* Natural Green / Amber */
@import "@ninna-ui/core/theme/presets/minimal.css"; /* Clean Monochrome */

Every preset includes automatic dark mode via prefers-color-scheme, plus manual toggle with a .dark class. All colors use the oklch color space for perceptually uniform, vibrant palettes with guaranteed WCAG AA contrast.

Production-ready project in seconds - TypeScript strict, all packages pre-installed, theme configured:

npx @ninna-ui/cli init my-app -t nextjs --preset ocean

pnpm install           # Install all dependencies
pnpm dev               # Start all dev watchers
pnpm build             # Build all 12 packages
pnpm test              # Run 700+ tests across 51 test files
pnpm lint              # Lint + typecheck all packages
pnpm --filter @ninna-ui/playground dev   # Developer sandbox at localhost:3000
pnpm --filter @ninna-ui/docs dev         # Storybook at localhost:6006

Public documentation: ninna-ui.dev - the full docs website is in the separate ninna-ui-web repository.

ninna-ui/
├── packages/
│   ├── core/              # Design tokens, Tailwind class maps, 5 CSS theme presets
│   ├── utils/             # Shared utilities - cn(), composeRefs, createContext
│   ├── react-internal/    # Radix engine isolation layer (11 engines + Slot)
│   ├── primitives/        # 14 foundational components (pure React, no Radix)
│   ├── feedback/          # 8 user feedback components + toast API
│   ├── forms/             # 17 form components with Radix-powered accessibility
│   ├── layout/            # 10 responsive layout primitives
│   ├── overlays/          # 5 overlay components with focus trapping
│   ├── navigation/        # 5 navigation components (2 Radix + 3 custom)
│   ├── data-display/      # 7 data display components with semantic HTML
│   ├── code-block/        # Lightweight syntax highlighter (regex, no Prism/Shiki)
│   └── cli/               # Project scaffolding with 4 framework templates (Vite, Next.js, React Router v7, Astro)
├── apps/
│   ├── playground/        # React Router v7 developer sandbox (SPA mode)
│   └── docs/              # Storybook 10 - interactive component stories
├── docs/
│   ├── architecture/      # Monorepo structure, dependency graph, design patterns
│   ├── guides/            # Contributing, development rules, publishing
│   ├── standards/         # Accessibility, component standards, testing strategy
│   └── brand/             # Product identity and competitive positioning

• Documentation Website - Full public docs with live demos, API reference, and framework guides
• Architecture Guide - Monorepo structure, dependency graph, theme system, component patterns
• Contributing Guide - Development workflow, package boundaries, PR process, component checklist
• Component Standards - File structure, props design, accessibility, testing requirements
• Accessibility Standards - WCAG 2.1 AA compliance, ARIA patterns, keyboard navigation
• Testing Strategy - 700+ tests, @sa11y/vitest integration, priority-based coverage
• Development Rules - Naming conventions, Tailwind CSS rules, Radix isolation, data attributes

MIT License - see LICENSE for details.