heroui-inc/heroui
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
η 美しく、高速でモダンな React UI ライブラリ。 (前回NextUI)
概要
HeroUI(Previously NextUI)は、Tailwind CSS v4のユーティリティファーストスタイリングでReact Ariaのアクセシビリティリグを組み合わせる、プロダクション対応のReactコンポーネントライブラリです。 クリーンコンパウンドコンポーネントAPI(カード)を出荷します。 ヘッダー、カード。コンテンツ、選択。 項目、...)はラッパーを要求し、React 19 および Next.js が付いている箱から働かせません。 - — WCAG準拠のキーボード、フォーカス、およびスクリーンリーダーの動作のためにReact Ariaに構築 - — 近代的なエンジン、CSS-in-JSのランタイム、より小さい出力、より速いビルド - - Composable API(カード)。 深くネストされたプロップの代わりに、ヘッダ、Card.Content() - プロバイダーラッパーは必要ありません(Chakra、MUIとは異なります) - MCPサーバー、llms.txt、およびAIアシスタントがコンポーネントを理解しているので、AIアシスタントはNextUIとして以前知られ、何千ものプロダクションアプリで信頼されています 訪問 heroui.com/docs/react/getting-started/quick-start で開始します。 HeroUI.
概要（AI 翻訳）
なぜヒーローUI?
HeroUI(Previously NextUI)は、Tailwind CSS v4のユーティリティファーストスタイリングでReact Ariaのアクセシビリティリグを組み合わせる、プロダクション対応のReactコンポーネントライブラリです。 クリーンなコンパウンドコンポーネント API (Card.Header]), [Card.Content], [Select.Item], …) を出荷し、 [[ ]]]] のラッパーを要求し、React 19 と Next.js のボックスから動作します。
-デフォルトでアクセス可能 - WCAG準拠のキーボード、フォーカス、およびスクリーンリーダーの動作のためにReact Aria上に構築
-Tailwind CSS v4 — モダンエンジン、CSS-in-JS のランタイム、より小さい出力、より速いビルド
-コンパウンドコンポーネント — 深くネストされたプロップの代わりに、API([Card.Header)、[[Card.Content)をコンパイル可能
- ゼロボイラプレート — プロバイダーラッパー不要(チャクラとは異なり、MUI)
-AI-native — MCP サーバー、[
llms.txt]、およびエージェントのスキルにより、AIのアシスタントがコンポーネントを理解しています。 -Battle-tested — 以前は、数千のプロダクションアプリによって信頼されるNextUIとして知られている
パッケージ
| パッケージ | 概要 |
お問い合わせ
| [@heroui/react | 全成分バンドル |
| 【[T8] | スタイル・テーマのみ |
| コンポーネントサブパス | 例.
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 README の抜粋です。原文を見る。
Why HeroUI?
HeroUI (previously NextUI) is a production-ready React component library that combines the accessibility rigor of React Aria with the utility-first styling of Tailwind CSS v4. It ships a clean compound component API (Card.Header, Card.Content, Select.Item, …), requires no `` wrapper, and works out of the box with React 19 and Next.js.
- Accessible by default — Built on React Aria for WCAG-compliant keyboard, focus, and screen-reader behavior
- Tailwind CSS v4 — Modern engine, no CSS-in-JS runtime, smaller output, faster builds
- Compound components — Composable API (
Card.Header,Card.Content) instead of deeply nested props - Zero boilerplate — No Provider wrapper needed (unlike Chakra, MUI)
- AI-native — MCP server,
llms.txt, and agent skills so AI assistants understand your components - Battle-tested — Previously known as NextUI, trusted by thousands of production apps
Packages
| Package | Description |
|---|---|
@heroui/react |
Full component bundle |
@heroui/styles |
Styles / theme only |
| Component subpaths | e.g. @heroui/react/button, @heroui/react/modal — per-component imports from the published @heroui/react package |
Getting Started
Visit heroui.com/docs/react/getting-started/quick-start to get started with HeroUI.
npm install @heroui/styles @heroui/react
Who Is This For?
HeroUI is a good fit if you are building:
- SaaS applications — forms, tables, overlays, and notifications out of the box
- Dashboards & admin panels — data-dense layouts with consistent design tokens
- E-commerce storefronts — performant, accessible, SEO-friendly components
- Marketing sites & landing pages — polished UI without a heavyweight runtime
- Any React / Next.js project that values design quality and accessibility
AI-Powered Development
HeroUI is built for the AI-assisted development workflow.
| Tool | What it does |
|---|---|
MCP Server (@heroui/react-mcp) |
Components that understand your theme — install the server in Cursor, Claude Code, Windsurf, or any MCP-compatible editor |
推奨ツール
別のキーワードを試すか、フィルタを外してください。
インストール
npx skillfish add heroui-inc/heroui