Ninna UI

Ninna UI
难度:
知名公司
NU

效果预览

风格描述

零运行时 React 组件库,专为 Tailwind CSS v4 + React 19 设计

标签

Ninna UI前端框架

提示词模板

基础模板
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.

变体提示词

📱 移动端
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.
📊 仪表板
Design a dashboard with Ninna UI design language. Use Ninna UI color identity with #10B981 accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Ninna UI visual identity. Use Ninna UI color identity with #10B981 accents. Compelling, conversion-focused.

使用示例

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.

适合场景

  • Framework
  • React 19 projects
  • Modern web applications

不适合场景

  • Unrelated design aesthetics
  • Different brand guidelines