Ninna UI

Difficulty:
Company
NU

Effect Preview

Style Description

Zero-runtime React component library, purpose-built for Tailwind CSS v4 + React 19

Tags

Ninna UIFramework

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

Web App
Build a React 19 app with Ninna UI design language, zero-runtime theming, and #10B981 color system.

Ninna UI Dashboard

Dashboard
Create a dashboard using Ninna UI style with oklch theme presets and Tailwind CSS v4.

✅ Best For

  • Framework
  • React 19 projects
  • Modern web applications

✅ Avoid For

  • Unrelated design aesthetics
  • Different brand guidelines