69 Production Components
Buttons, forms, modals, tables, navigation - 12 tree-shakeable packages. Install only what you use.
NewProduction-ready blocks availableNew blocks
The foundation for your React design system
69 accessible, production-ready components. 5 theme presets. One CSS import. Zero runtime theming overhead.
- React 19
- Tailwind CSS v4
- WCAG 2.1 AA
Production-ready UI blocks
Copy-paste complete UI patterns. No mocked elements. Built entirely with Ninna UI.
Everything to build faster
A complete React UI foundation - accessible, themeable, and modular by design.
Tailwind CSS v4 Native
CSS-first. No tailwind.config.ts. Works with Vite, Next.js, React Router v7 or Astro.
oklch + Auto Dark Mode
Perceptually uniform colors. WCAG AA guaranteed. Dark mode via pure CSS.
5 Theme Presets, Zero JS
Switch your entire design system with one CSS import. No providers, no React context, no hydration cost.
Radix-Powered Accessibility
Radix UI internals. Zero API leakage. WCAG 2.1 AA on every component, out of the box.
npx @ninna-ui/cli init
CLI Scaffolding
Bootstrap a production-ready project in seconds.
Built for every kind of builder
Whether you're shipping a SaaS MVP or unifying a design system across dozens of products, Ninna UI adapts to your workflow.
SaaS Teams
Ship product, not a design system.
Stop reinventing forms, tables, and modals. Ninna UI gives your team a battle-tested foundation so you can focus on the features that differentiate your product.
- DataTable with sorting & filtering
- Complex form layouts out of the box
- Modal, Drawer, DropdownMenu - all accessible
Design System Teams
A foundation that matches your brand.
5 theme presets and a full CSS custom-properties API let you drive every color, radius, and spacing value from a single CSS file - no provider wrappers.
- oklch color palette with auto dark mode
- data-slot CSS API for granular overrides
- Zero JavaScript runtime theming
Indie Hackers
From idea to launch in a weekend.
One CLI command bootstraps a production-ready React app with auth pages, dashboard scaffolding, and your chosen theme. Build faster and keep shipping.
- npx @ninna-ui/cli init - zero config
- Works with Next.js, Vite, Astro, React Router v7
- Copy-paste example blocks
Agencies & Freelancers
Deliver polished UIs on every project.
Reuse the same component vocabulary across every client. Swap themes per project, keep code consistent, and bill for strategy-not boilerplate.
- 12 independently versioned packages
- Install only what each project needs
- WCAG 2.1 AA - accessibility pre-solved
Powered by modern web standards
- Next.js 15
- Vite 6
- React Router v7
- React 19
- TypeScript 5.7
- Tailwind CSS v4
Theme Showcase
Theming
5 theme presets. One CSS import.
Switch your entire design system instantly. No JavaScript providers, no React Context, no re-renders. Pure CSS custom properties powered by the oklch color space.
Interactive Elements
Forms & Toggles
Enable Dark Mode
Push Notifications
Semantic Colors
primary
secondary
accent
success
warning
danger
info
neutral
Surfaces & Data
Light to dark cascading scales
75%
Interactive Code Example
Quickstart
Up and running in 3 steps
From zero to a fully-themed React 19 application in under 2 minutes. No complex wrapper providers required.
npx @ninna-ui/cli init my-app
# Or install manually:
pnpm add @ninna-ui/core @ninna-ui/primitives @ninna-ui/forms12 modular packages
Install only what you need. Every package is strictly typed, independently versioned, and fully tree-shakeable.
- Components
69
Components
across 12 packages
- Packages
12
Packages
independently versioned
- Tests
700+
Tests
covering every component
- Theme Presets
5
Theme Presets
pure CSS, zero JS
- WCAG
AA
WCAG
compliant by default
Start building
Ready to build the future?
Run one CLI command. Get 69 accessible components, 5 presets, and zero runtime overhead.
- Open source
- MIT License
- React 19
- Tailwind CSS v4