Ninna UI 是专为 Tailwind CSS v4 与 React 19 设计的零运行时组件库。它取消 ThemeProvider：主题靠纯 CSS 导入与五个基于 oklch 的预设（Default、Ocean、Sunset、Forest、Minimal）切换；69 个组件拆分进 12 个可摇树包，每个组件都满足 WCAG 2.1 AA 无障碍标准，并完整支持 React 19 的 forwardRef 与 TypeScript 泛型。适合现代 React 产品与主题化界面。
React开发者工具现代极简
提示词模板
基础模板
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 应用
Web 端Build a React 19 app with Ninna UI design language, zero-runtime theming, and #10B981 color system.
Ninna UI 仪表板
仪表板Create a dashboard using Ninna UI style with oklch theme presets and Tailwind CSS v4.
✅ 适合场景
- 框架生态
- React 19 项目
- Tailwind v4 的轻量 React 界面
❌ 不适合场景
- 需要重型 UI 框架的企业系统
- 复古像素游戏页面
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。