Repolode
投稿する
heroui-inc

heroui-inc/heroui

React AriaとTailwind CSS v4を基盤とするReact UIコンポーネントライブラリ。旧称はNextUI。

GitHub で見る公式サイト
スター
30,968
フォーク
2,237
未解決の Issue
24
最終コミット
一昨日

これは何？

HeroUIは、React Ariaのアクセシビリティ用プリミティブとTailwind CSS v4によるスタイリングを組み合わせたReactコンポーネントライブラリです。Card.HeaderやSelect.ItemのようなCompound Component APIを提供し、アプリをProviderでラップする必要はありません。React 19とNext.jsに対応しており、ライブラリ全体をまとめてインストールすることも、コンポーネントを個別に読み込んでtree-shakingすることもできます。

ReactでSaaSのダッシュボード、管理画面、ストアフロント、マーケティングサイトを開発するプロダクトチームを対象としています。スタイリングにはTailwindを使い、CSS-in-JSランタイムは不要です。また、テーマを単独で提供する独立したstylesパッケージもあります。MCPサーバー、llms.txtファイル、CursorやClaude CodeなどのAIコーディングアシスタント向けagent skillsも含まれています。

HeroUIはNextUIの後継となるv3です。既存プロジェクト向けに、バージョン2も専用のドキュメントサイトで引き続き利用できます。

主な機能

  • 01React Ariaを基盤とし、キーボード操作、フォーカス、スクリーンリーダーの挙動に対応
  • 02CSS-in-JSランタイムを使わず、Tailwind CSS v4でスタイリング
  • 03Card.HeaderやSelect.ItemなどのCompound Component API
  • 04Providerでラップする必要がなく、React 19とNext.jsに対応
  • 05tree-shakingに対応したコンポーネント別パッケージと、単独で利用できるstylesパッケージ
  • 06AIコーディングアシスタント向けのMCPサーバー、llms.txt、agent skills

ユースケース

  • フォーム、テーブル、オーバーレイ、通知を備えたSaaSアプリケーションの構築
  • 一貫性のあるデザイントークンを使った管理ダッシュボードの作成
  • アクセシブルなコンポーネントを使ったNext.jsのマーケティングサイトやランディングページの開発
  • NextUIプロジェクトからv3 APIへの移行

クイックスタート

  1. 1

    HeroUIのクイックスタートドキュメントを確認する

  2. 2

    スタイルとReactコンポーネントのパッケージをインストールする

    npm install @heroui/styles @heroui/react

使う前に知っておきたいこと

  • 現行のv3リリースのドキュメントはまだ整備中で、READMEでは旧バージョン向けに別のv2サイトを案内しています。

トピック

#react#component-library#tailwind-css#accessibility#ui-components#nextjs#typescript#components#library#reactjs

よくある質問

heroui とは？
React AriaとTailwind CSS v4を基盤とするReact UIコンポーネントライブラリ。旧称はNextUI。 HeroUIは、React Ariaのアクセシビリティ用プリミティブとTailwind CSS v4によるスタイリングを組み合わせたReactコンポーネントライブラリです。Card.HeaderやSelect.ItemのようなCompound Component APIを提供し、アプリをProviderでラップする必要はありません。React 19とNext.jsに対応しており、ライブラリ全体をまとめてインストールすることも、コンポーネントを個別に読み込んでtree-shakingすることもできます。
heroui は無料で使えますか？ライセンスは？
heroui は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
heroui は今もメンテナンスされていますか？
活発にメンテナンス中。heroui の最終コミットは 2026年10月18日 です。
heroui は何に使えますか？
フォーム、テーブル、オーバーレイ、通知を備えたSaaSアプリケーションの構築 一貫性のあるデザイントークンを使った管理ダッシュボードの作成 アクセシブルなコンポーネントを使ったNext.jsのマーケティングサイトやランディングページの開発 NextUIプロジェクトからv3 APIへの移行
heroui のインストール方法は？
HeroUIのクイックスタートドキュメントを確認する スタイルとReactコンポーネントのパッケージをインストールする: npm install @heroui/styles @heroui/react
heroui はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/heroui-inc/heroui

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト