{"id":46541097,"url":"https://github.com/ninna-ui/ninna-ui","last_synced_at":"2026-04-04T22:02:24.850Z","repository":{"id":341908998,"uuid":"1160999936","full_name":"ninna-ui/ninna-ui","owner":"ninna-ui","description":"Full React UI library with zero runtime styling and native Tailwind support. Built for accessibility, composability, and production-scale apps.","archived":false,"fork":false,"pushed_at":"2026-04-04T18:11:13.000Z","size":1125,"stargazers_count":8,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-04T18:23:58.119Z","etag":null,"topics":["accessible-ui","component-library","css-variables","dark-mode","dark-theme","design-system","frontend","headless-components","nextjs","radix-ui","react","react-ui","tailwind","tailwind-ui","tailwindcss","tailwindcss-v4","typescript","ui-components","uikit","zero-runtime"],"latest_commit_sha":null,"homepage":"https://ninna-ui.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ninna-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-18T16:09:42.000Z","updated_at":"2026-04-04T16:33:53.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ninna-ui/ninna-ui","commit_stats":null,"previous_names":["ninna-ui/ninna-ui"],"tags_count":74,"template":false,"template_full_name":null,"purl":"pkg:github/ninna-ui/ninna-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninna-ui%2Fninna-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninna-ui%2Fninna-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninna-ui%2Fninna-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninna-ui%2Fninna-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ninna-ui","download_url":"https://codeload.github.com/ninna-ui/ninna-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninna-ui%2Fninna-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31413962,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessible-ui","component-library","css-variables","dark-mode","dark-theme","design-system","frontend","headless-components","nextjs","radix-ui","react","react-ui","tailwind","tailwind-ui","tailwindcss","tailwindcss-v4","typescript","ui-components","uikit","zero-runtime"],"created_at":"2026-03-07T01:08:21.841Z","updated_at":"2026-04-04T22:02:24.837Z","avatar_url":"https://github.com/ninna-ui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ninna UI\n\n**Full React UI library with zero runtime styling and native Tailwind CSS v4 support.**\n\nThe 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.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Strict-blue.svg)](https://www.typescriptlang.org/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-v4.1-38bdf8.svg)](https://tailwindcss.com/)\n[![React](https://img.shields.io/badge/React-19-61dafb.svg)](https://react.dev/)\n[![npm](https://img.shields.io/npm/v/@ninna-ui/core.svg)](https://www.npmjs.com/org/ninna-ui)\n\n**[Documentation →](https://www.ninna-ui.dev)** · **[npm →](https://www.npmjs.com/org/ninna-ui)** · **[GitHub →](https://github.com/ninna-ui/ninna-ui)** · **[Comparison →](https://www.ninna-ui.dev/comparison)**\n\n---\n\n## Why Ninna UI?\n\nMost 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.\n\n- **Tailwind CSS v4.1 native** - Pure CSS-first configuration. No `tailwind.config.ts`, no PostCSS plugins, no build-step theming\n- **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\n- **oklch color system** - Perceptually uniform, high-chroma colors with automatic light/dark mode and guaranteed WCAG AA contrast\n- **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\n- **`data-slot` CSS override API** - 98 named slots across all components for surgical styling without `!important` hacks\n- **React Server Components ready** - Zero `'use client'` directives. Every component works in RSC, SSR, and SPA out of the box\n- **TypeScript Strict with full JSDoc** - Complete type safety, IntelliSense documentation on every prop, and zero `any` in the public API\n- **Tree-shakeable modular packages** - 12 independently installable packages. Import only what you use - no monolithic bundle\n\n## How Ninna UI Compares\n\n| Feature | Ninna UI | shadcn/ui | Chakra UI | Mantine | DaisyUI |\n|---------|:--------:|:---------:|:---------:|:-------:|:-------:|\n| Tailwind CSS v4 native | **Yes** | Yes | No | No | Yes |\n| Zero JS runtime theming | **Yes** | Yes | No | No | Yes |\n| Built-in theme presets | **5** | 0 | 0 | 0 | 30+ |\n| One-line theme switch | **Yes** | No | No | No | Yes |\n| oklch perceptual colors | **Yes** | Partial | No | No | Yes |\n| Radix accessibility | **Yes** | Yes | No | No | No |\n| `data-slot` CSS targeting | **98 slots** | Yes | Yes | No | No |\n| Modular npm packages | **12 pkgs** | Copy-paste | 1 package | 1 package | 1 plugin |\n| No `'use client'` needed | **Yes** | Yes | No | No | N/A |\n| CLI project scaffolding | **4 templates** | Yes | No | No | No |\n| React 19 support | **Yes** | Yes | Yes | Yes | N/A |\n| Framework agnostic | **Yes** | Yes | Yes | Yes | Yes |\n\n\u003e **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.\n\n## Quick Start\n\n### 1. Install\n\n```bash\npnpm add @ninna-ui/core @ninna-ui/primitives\n```\n\n### 2. Add a theme to your CSS (one line)\n\n```css\n@import \"tailwindcss\";\n@import \"@ninna-ui/core/theme/presets/default.css\";\n```\n\n### 3. Build your UI\n\n```tsx\nimport { Button } from \"@ninna-ui/primitives\";\nimport { VStack } from \"@ninna-ui/layout\";\n\nexport function App() {\n  return (\n    \u003cVStack gap=\"md\"\u003e\n      \u003cButton color=\"primary\" variant=\"solid\"\u003eGet Started\u003c/Button\u003e\n      \u003cButton color=\"secondary\" variant=\"outline\"\u003eLearn More\u003c/Button\u003e\n    \u003c/VStack\u003e\n  );\n}\n```\n\n### Or scaffold a production-ready project in seconds\n\n```bash\nnpx @ninna-ui/cli init my-app\n```\n\nChoose 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.\n\n## Packages\n\n### Component Packages\n\n| Package | Components | What It Does |\n|---------|:----------:|--------------|\n| [`@ninna-ui/primitives`](./packages/primitives) | 14 | Essential building blocks - Button, Badge, Avatar, Text, Heading, Link, Code, Kbd, Divider, and more |\n| [`@ninna-ui/feedback`](./packages/feedback) | 8 | User feedback and status communication - Alert, Toast, Progress, Loading, Skeleton, EmptyState |\n| [`@ninna-ui/forms`](./packages/forms) | 17 | Complete form toolkit with validation - Input, Select, Checkbox, Switch, RadioGroup, Slider, FileUpload |\n| [`@ninna-ui/layout`](./packages/layout) | 10 | Responsive layout primitives - Box, Stack, Flex, Grid, Container, Center, SimpleGrid, AspectRatio |\n| [`@ninna-ui/overlays`](./packages/overlays) | 5 | Accessible overlay components with focus trapping - Modal, Drawer, Popover, Tooltip, DropdownMenu |\n| [`@ninna-ui/navigation`](./packages/navigation) | 5 | App navigation patterns - Tabs, Accordion, Breadcrumbs, Pagination, Stepper |\n| [`@ninna-ui/data-display`](./packages/data-display) | 7 | Data visualization components - Card, Stat, Table, DataTable, Timeline, Tree, Calendar |\n| [`@ninna-ui/code-block`](./packages/code-block) | 1 | Lightweight syntax-highlighted code block with copy-to-clipboard - no Prism or Shiki dependency |\n\n### Infrastructure Packages\n\n| Package | What It Does |\n|---------|--------------|\n| [`@ninna-ui/core`](./packages/core) | Design system foundation - TypeScript tokens, Tailwind class mappings, 5 CSS theme presets with oklch colors and automatic dark mode |\n| [`@ninna-ui/cli`](./packages/cli) | Zero-config project scaffolding - 4 framework templates (Vite, Next.js, React Router v7, Astro) with theme selection |\n| [`@ninna-ui/utils`](./packages/utils) | Shared utility functions - `cn()` class merger, `composeRefs`, `createContext`, keyboard constants, SSR helpers |\n| [`@ninna-ui/react-internal`](./packages/react-internal) | Radix engine isolation layer - wraps 11 Radix primitives behind clean TypeScript interfaces so Radix never leaks to consumers |\n\n## Theme Presets\n\nSwitch your entire design system with a single CSS import - no JavaScript configuration, no provider wrappers, no build step:\n\n```css\n@import \"@ninna-ui/core/theme/presets/default.css\";  /* Electric Purple / Magenta */\n@import \"@ninna-ui/core/theme/presets/ocean.css\";     /* Cool Blue / Cyan */\n@import \"@ninna-ui/core/theme/presets/sunset.css\";    /* Warm Orange / Rose */\n@import \"@ninna-ui/core/theme/presets/forest.css\";    /* Natural Green / Amber */\n@import \"@ninna-ui/core/theme/presets/minimal.css\";   /* Clean Monochrome */\n```\n\nEvery 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.\n\n## Starter Templates\n\nProduction-ready project in seconds - TypeScript strict, all packages pre-installed, theme configured:\n\n| Template | Framework | Bundler | CSS Integration |\n|----------|-----------|---------|-----------------|\n| [`vite-react`](./packages/cli/templates/vite-react) | React 19 | Vite 7 | `@tailwindcss/vite` |\n| [`nextjs`](./packages/cli/templates/nextjs) | Next.js 15 App Router | Webpack/Turbopack | `@tailwindcss/postcss` |\n| [`react-router`](./packages/cli/templates/react-router) | React Router v7 | Vite 7 | `@tailwindcss/vite` |\n| [`astro`](./packages/cli/templates/astro) | Astro 5 + React 19 | Vite 7 | `@tailwindcss/vite` |\n\n```bash\nnpx @ninna-ui/cli init my-app -t nextjs --preset ocean\n```\n\n## Development\n\n```bash\npnpm install           # Install all dependencies\npnpm dev               # Start all dev watchers\npnpm build             # Build all 12 packages\npnpm test              # Run 700+ tests across 51 test files\npnpm lint              # Lint + typecheck all packages\npnpm --filter @ninna-ui/playground dev   # Developer sandbox at localhost:3000\npnpm --filter @ninna-ui/docs dev         # Storybook at localhost:6006\n```\n\n\u003e **Public documentation:** [ninna-ui.dev](https://www.ninna-ui.dev) - the full docs website is in the separate `ninna-ui-web` repository.\n\n## Project Structure\n\n```\nninna-ui/\n├── packages/\n│   ├── core/              # Design tokens, Tailwind class maps, 5 CSS theme presets\n│   ├── utils/             # Shared utilities - cn(), composeRefs, createContext\n│   ├── react-internal/    # Radix engine isolation layer (11 engines + Slot)\n│   ├── primitives/        # 14 foundational components (pure React, no Radix)\n│   ├── feedback/          # 8 user feedback components + toast API\n│   ├── forms/             # 17 form components with Radix-powered accessibility\n│   ├── layout/            # 10 responsive layout primitives\n│   ├── overlays/          # 5 overlay components with focus trapping\n│   ├── navigation/        # 5 navigation components (2 Radix + 3 custom)\n│   ├── data-display/      # 7 data display components with semantic HTML\n│   ├── code-block/        # Lightweight syntax highlighter (regex, no Prism/Shiki)\n│   └── cli/               # Project scaffolding with 4 framework templates (Vite, Next.js, React Router v7, Astro)\n├── apps/\n│   ├── playground/        # React Router v7 developer sandbox (SPA mode)\n│   └── docs/              # Storybook 10 - interactive component stories\n├── docs/\n│   ├── architecture/      # Monorepo structure, dependency graph, design patterns\n│   ├── guides/            # Contributing, development rules, publishing\n│   ├── standards/         # Accessibility, component standards, testing strategy\n│   └── brand/             # Product identity and competitive positioning\n```\n\n## Documentation\n\n- **[Documentation Website](https://www.ninna-ui.dev)** - Full public docs with live demos, API reference, and framework guides\n- **[Architecture Guide](./docs/architecture/ARCHITECTURE.md)** - Monorepo structure, dependency graph, theme system, component patterns\n- **[Contributing Guide](./docs/guides/CONTRIBUTING.md)** - Development workflow, package boundaries, PR process, component checklist\n- **[Component Standards](./docs/standards/COMPONENT_STANDARD.md)** - File structure, props design, accessibility, testing requirements\n- **[Accessibility Standards](./docs/standards/ACCESSIBILITY.md)** - WCAG 2.1 AA compliance, ARIA patterns, keyboard navigation\n- **[Testing Strategy](./docs/standards/TESTING_STRATEGY.md)** - 700+ tests, vitest-axe integration, priority-based coverage\n- **[Development Rules](./docs/guides/DEVELOPMENT_RULES.md)** - Naming conventions, Tailwind CSS rules, Radix isolation, data attributes\n\n## License\n\nMIT License - see [LICENSE](./LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fninna-ui%2Fninna-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fninna-ui%2Fninna-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fninna-ui%2Fninna-ui/lists"}