はじめに

WebサイトやWebアプリケーションを作る際に、Reactを使って開発をする方も多いのではないでしょうか。
世界で人気があり、学習も比較的容易だと言われているReactですが、1からかっこいいUIを構築するのは難しいですよね...
今回はReactで開発をする際に使えるコンポーネントセットやデザインテンプレートを紹介します。

この記事内ではできるだけ無料で使えるものを紹介していますが、課金をすることによってより多くのテーマが扱えたりするものも含まれています。

弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。

Reactとは

Facebook社（現Meta社）が開発したUI構築のためのJavaScriptライブラリです。
「Facebook」「Instagram」「Yahoo!」「Airbnb」「Netflix」「Slack」など、世界中で多く採用されているライブラリです。オープンソースとしても公開されているので、品質も保たれています。
公式サイト：https://ja.legacy.reactjs.org/

UI・デザインシステム

Atomize

公式サイト:https://atomizecode.com/
github:https://github.com/proksh/atomize#readme

オープンソースのUIフレームワークです。開発者とデザイナーが協力して一貫性の取れたUIを構築できるように配慮されています。スタイルガイドに沿って統一されたUI設計ができる他、カスタマイズやコンポーネントの追加もできます。

Treact

公式サイト:https://treact.owaiskhan.me/

フレームワークにTailwindCSSを使用して開発されたUIコンポーネントセットです。7種類のランディングページのデモ、8種類のインナーページのデモ、52種類のコンポーネントが用意されています。また、デスクトップページだけでなく、モバイルやタブレット向けにも対応可能です。

Chakra UI

公式サイト:https://chakra-ui.com/
github:https://github.com/chakra-ui/chakra-ui/

ChakraUIはReactアプリケーションを構築するために必要なコンポーネントセットを提供しています。Githubのスター数は32.8kと多くの人から支持を得ているコンポーネントセットです。ほぼ全てのコンポーネントがダークモードに対応していたり、すべてのコンポーネントについてWAI-ARIAの仕様に準拠していたりととても使いやすいです。

Material KIT React

公式サイト:https://www.creative-tim.com/product/material-kit-react
github:https://github.com/creativetimofficial/material-dashboard-react

豊富な機能と高いカスタマイズ性を備えた、見栄えの良いウェブサイトを作りたいと考えている人にはもってこいの無料のReactUIテーマです。ボタン、アラート、カードなど、40種類以上の個別要素で構成されており、自由に選択、組み合わせることができます。また、デザインブロックやサンプルページも用意されているので開発がスムーズに進みます。英語ではありますが、開発者向けのドキュメントも充実しています。