Ninna UI は Tailwind CSS v4 と React 19 のために設計されたゼロランタイムのコンポーネントライブラリです。ThemeProvider を廃止し、テーマは純 CSS のインポートと oklch ベースの 5 つのプリセット（Default、Ocean、Sunset、Forest、Minimal）で切り替えます。69 のコンポーネントはツリーシェイク可能な 12 のパッケージに分割され、すべてが WCAG 2.1 AA のアクセシビリティ基準を満たし、React 19 の forwardRef と TypeScript ジェネリクスを完全にサポートします。モダンな React プロダクトとテーマ化された UI に適しています。
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 アプリ
WebBuild 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
❌ 適さない用途
- 重量級の UI フレームワークが必要な企業システム
- レトロピクセルのゲームページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。