はじめに
昨今のReact, Next.jsを用いたアプリケーション開発では、UIコンポーネントライブラリを用いることが一般的となっています。
そこで、気になったコンポーネントライブラリをまとめていきます。
紹介
以下が今回紹介するコンポーネントライブラリです。
| ライブラリ名 | URL | 気になるレベル(1~5) |
|---|---|---|
| Mantine | https://mantine.dev | 5 |
| HeroUI | https://www.heroui.com | 4 |
| Justd | https://getjustd.com | 3 |
| shadcn/ui | https://ui.shadcn.com/docs | 3 |
一つずつ紹介していきます。
Mantine
Mantineは、モダンなReactアプリケーション向けのUIコンポーネントライブラリです。
豊富なコンポーネント群と柔軟なカスタマイズ性が特徴で、TypeScriptのサポートも充実しています。
良いところ
- コンポーネント数が他に比べてかなり豊富(今回紹介したものでは一番)
- ドキュメントがとても読みやすく、説明が細かく丁寧
- ダークモード対応
- コンポーネントだけでなく、便利なhookが用意されている
- Next.jsに公式対応している
- テンプレートなども公開されているので、コピペで利用可能なものもある
インストール方法
Mantineのインストール方法については、以下のページをご覧ください。
🔗リンク
⚪︎ドキュメント
⚪︎テンプレート
雑感
Mantineはコンポーネントも豊富なだけではなく、ドキュメントが読みやすいので、今回紹介しているものの中では、一番ではないかなと感じています。
また、Tailwind CSSを使っていないので、Tailwindを使っていないメンバーが多くても導入しやすいというのも良い点ではないかなと思います。
私は、新規プロジェクトを立ち上げる際は、Mantineを推したいなと思います。
HeroUI
HeroUIは、Vercelが提供するUIライブラリで、React用のUIライブラリとなります。
最近まで「Next-UI」という名前でしたが、2025年1月17日に「HeroUI」に名前が変わりました。
React Area ComponentsとTailwind CSSをベースにしています。
良いところ
- TypeScriptで記述されているので、TypeScriptと互換性がある
- 豊富なコンポーネント(チャートコンポーネントも用意されているので良い)
- Framer Motionを採用していて、アニメーションをより簡単かつ効率的に処理
- ダークモード対応
- Tailwind CSSが使える
- 企業(Vercel)として取り組んでいる分サポートが長そう
雑感
Vercelが提供しているので、安心して利用できます。コンポーネントもVercelチックなものが多い気もします。
Mantineとは違い、Tailwind CSSが使えるので、Tailwind CSSをどうしても使いたいという場合は、こちらを選択するのが良いかと思います。
🔗リンク
⚪︎ドキュメント
Justd
今回紹介しているコンポーネントライブラリの中で、一番直近で開発スピードが早いなと感じています。(開発者のやる気がすごい)
React Area ComponentsとTailwind CSSをベースにしています。
良いところ
- Tailwindの最新バージョンに対応している(v4)
- アップデートが頻繁に行われており、将来性がある
- コンポーネントが豊富(Mantineよりは下かなーという印象)
- Tailwind CSSが使える
雑感
リリースされたばかりのTailwind CSSのバージョン4に対応していたりと、開発のスピードが他のものと比べ早いので、将来性(開発者のモチベーション)は他のライブラリよりあるのかなと思います。
shadcn/ui
直近だと一番人気のあるコンポーネントライブラリかなという印象です。
2023年, 2024年の2年連続でプロジェクト・オブ・ザ・イヤーを受賞しています。
コンポーネントはnpm経由でインストールします。
Radix UIとTailwind CSSをベースにしています。
良いところ
- Tailwind CSSが使える
- Next.js v15 + React v19に対応
- ダークモード対応
- 世界的に人気があり、信頼性がとても高い
- npm経由でコンポーネントをインストールするので、コンポーネントコードの完全な制御が可能
雑感
shadcn/uiはnpm経由で、コンポーネントをインストールするので、プロジェクト間で一貫性を保ちたい場合には、少し手間が掛かりそうだなーと感じました。
あと、コンポーネントのアップデートも手動で行う必要があるので、その点については、コストが少し掛かりそうだなと感じました。
🔗リンク
⚪︎ドキュメント
最後に
他にも色々な記事を書いているので、よければ読んでいってください！