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 產品與主題化介面。
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 應用
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 程式設計工具使用。