HeroUI（旧 NextUI）は React Aria と Tailwind CSS v4 をベースにした React コンポーネントライブラリで、v3 で全面的に書き換えられ、MUI、Chakra UI、shadcn/ui のモダンな代替を自称しています。デザインの主張は「デフォルトで美しく、必要なだけカスタマイズ」。アクセシビリティは React Aria が下支えし、CSS 変数に OKLCH の色彩を組み合わせ、純 CSS アニメーションでランタイムコストはゼロ。コンポーネントは複合 API に従い、Provider でのラップも不要で、デフォルトスタイルには微細なグラデーション、グラスモーフィズム、繊細なシャドウが備わっています。モダンな React プロダクト UI に適しています。
HeroUIフロントエンドフレームワーク
プロンプトテンプレート
基本テンプレート
Design a HeroUI-inspired interface. - Modern React components built on React Aria for accessibility; - Tailwind CSS v4 integration with CSS variables and OKLCH colors; - Smooth CSS animations with zero JavaScript runtime; - Compound component API: no provider wrapper needed; - Beautiful default styles with micro-gradients, glassmorphism, and refined shadows. Colors: #006FEE, #17C964, #F31260, #722ED1 with #006FEE accent. Typography: system-ui.
バリエーションプロンプト
📱 モバイル
Design a mobile app with HeroUI aesthetics. Use HeroUI color identity with #006FEE accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with HeroUI style. Use HeroUI color identity with #006FEE accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with HeroUI design language. Use HeroUI color identity with #006FEE accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with HeroUI visual identity. Use HeroUI color identity with #006FEE accents. Compelling, conversion-focused.
使用例
HeroUI Web アプリ
WebBuild a web app with HeroUI design language, React Aria components, and #006FEE color system.
HeroUI ダッシュボード
ダッシュボードCreate a dashboard using HeroUI style with beautiful default components and Tailwind CSS v4.
✅ 適した用途
- フレームワークエコシステム
- React プロジェクト
- React の軽量プロダクト UI
❌ 適さない用途
- 完全静的の純 CSS サイト
- レトロピクセル調のゲームページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。