Ninna UI is a zero-runtime React component library purpose-built for Tailwind CSS v4 and React 19. It drops the ThemeProvider entirely: theming is pure CSS imports with five oklch-based presets (Default, Ocean, Sunset, Forest, Minimal), 69 components live across 12 tree-shakeable packages, every component meets WCAG 2.1 AA, and React 19's forwardRef and TypeScript generics are fully supported.
ReactDeveloperMinimal
Prompt Template
Base Template
Design a Ninna UI-inspired interface. - Zero-runtime theming: no ThemeProvider needed, pure CSS import; - 69 components across 12 tree-shakeable packages; - 5 oklch-based theme presets: Default, Ocean, Sunset, Forest, Minimal; - WCAG 2.1 AA accessibility on every component; - React 19 compatible with forwardRef and TypeScript generics. Colors: #10B981, #3B82F6, #F59E0B, #EF4444 with #10B981 accent. Typography: system-ui.
Variant Prompts
📱 Mobile
Design a mobile app with Ninna UI aesthetics. Use Ninna UI color identity with #10B981 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Ninna UI style. Use Ninna UI color identity with #10B981 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Ninna UI design language. Use Ninna UI color identity with #10B981 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Ninna UI visual identity. Use Ninna UI color identity with #10B981 accents. Compelling, conversion-focused.
Usage Examples
Ninna UI React App
WebBuild a React 19 app with Ninna UI design language, zero-runtime theming, and #10B981 color system.
Ninna UI Dashboard
DashboardCreate a dashboard using Ninna UI style with oklch theme presets and Tailwind CSS v4.
✅ Best For
- Framework
- React 19 projects
- Lightweight Tailwind v4 React UIs
❌ Avoid For
- Enterprise systems needing heavy UI frameworks
- Retro pixel game pages
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.