すぐに使える！Reactテンプレート15選

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

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

弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、[こちら](https://www.recruit.nuco.co.jp/?qiita_item_id=76cf71142dd5abbec181)まで。


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

# UI・デザインシステム
### Atomize
![atomize.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/21811976-db20-597d-569d-5db6cad7e28b.png)
公式サイト:https://atomizecode.com/
github:https://github.com/proksh/atomize#readme

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

### Treact
![Treact.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/63148801-0ed7-e2b0-e041-5ebc867d435e.png)
公式サイト:https://treact.owaiskhan.me/

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

### Chakra UI
![Chakraui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/bca7c2f3-2f51-11e6-aeb6-ca4f074cee67.png)

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

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

### Material KIT React
![MaterialUIkit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/17bb8415-ca90-425e-64d7-6c45571748f1.png)

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

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

### Ant Design Pro
![AntDesignpro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/d068f701-d03d-d7cc-a55c-42e4845403ba.png)

公式サイト:https://pro.ant.design/
github:https://github.com/ant-design/ant-design-pro/

中国のAlibaba社が開発した[Ant Design](https://ant.design/)というライブラリを使用して作られているReactテンプレートです。美しいデザインで使いやすいことはもちろんですが、様々な画面サイズに対応したデザインで簡単な設定でカスタマイズ可能であることも特徴です。

### Base Web
![baseweb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/ac687f32-d251-808a-c1e3-6c091aca9b05.png)

公式サイト:https://baseweb.design/
github:https://github.com/uber/baseweb

日本ではUber Eatsで有名なUberで使用されているReactのコンポーネントとユーティリティからなるオープンソースのツールキットです。高品質でカスタマイズもしやすく、ドキュメントもとても丁寧です。エンタープライズアプリケーションやEコマース、スタートアップなどのプロジェクトに最適です。

### Blueprint
![Blueprint.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/60d98702-31ff-4336-2611-caf3165ce502.png)

公式サイト:https://blueprintjs.com/
github:https://github.com/palantir/blueprint

ReactベースのWeb用UIツールキットです。デスクトップで使うことを想定されており、複雑でデータ量の多いUIを構築するために最適化されています。日付や時刻、タイムゾーンなどを操作するための要素も揃っているのが特徴です。ドキュメントもまとまっておりとても見やすいです。

# ダッシュボード系
### Tabler
![tabler.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/1714d0ac-d744-4885-f292-20b9e96380d0.png)

公式サイト:https://tabler-react.com/
github:https://github.com/tabler/tabler-react

あらゆる種類のバックエンドWebアプリケーションに最適な無料の管理ダッシュボードテンプレートのReact版です。ボタン、マップ、チャート、フォームなどのコンポーネントが豊富に揃っています。

### Devias Kit
![Devais.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/276d7d1b-dc4f-42c2-cf65-4430a437d5a1.png)

公式サイト:https://material-kit-react.devias.io/
github:https://github.com/devias-io/material-kit-react

Material UIコンポーネントを使用して構築されたReact用のダッシュボードテンプレートです。無料でも7個のシングルページのデモが用意されていますが、Proバージョンを使うことによって、開発の幅はさらに広がりそうです。

### Shards Dashboard Lite
![Shards dashboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/83f7d939-b07c-a442-e490-1a3d24fa5a10.png)

公式サイト:https://designrevision.com/demo/shards-dashboard-lite-react/blog-overview
github:https://github.com/DesignRevision/shards-dashboard

Bootstrap4を使用して構築された、モダンなデザインのダッシュボードテンプレートです。ボタンやフォームなどのコンポーネントも用意されている他、1500以上のアイコンをサポートしていることも特徴です。

### Airframe
![Airframe.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/a32ecadb-dd19-787e-b69c-bd87acda7d50.png)

公式サイト:http://dashboards.webkom.co/react/airframe/dashboards/projects
github:https://github.com/0wczar/airframe-react

Bootstrap4とReact16をベースにした、無料かつオープンソースのReactアプリテンプレートです。10種類以上のレイアウトバリエーションがあり、コンポーネントも充実しています。CRM、CMS、管理ダッシュボード、分析などあらゆるWebアプリの作成に役立ちそうです。

# Webサイト
### Gatsby Starter Ghost
![Ghost & Gatsby.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/8a5de1f6-9fdb-b6ee-37a9-7c121c6b1730.png)

公式サイト:https://gatsby.ghost.org/
github:https://github.com/TryGhost/gatsby-starter-ghost

ブログ、マガジン、ニュースウェブサイトなど様々なWebサイトをこのテンプレートで作ることができます。デスクトップ、モバイル、タブレットなど全てのサイズに対応可能なサイトを作ることができることも魅力です。

### React SaaS Template
![React SaaS Template.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/edba0810-d125-5688-90a0-0a64f23dd986.png)

公式サイト:https://reactsaastemplate.com/
github:https://github.com/dunky11/react-saas-template

SaaSプロジェクト、オンラインサービスなどを展開するスタートアップ向けに開発されたテンプレートです。軽量でシンプルなWebサイトを作成することができます。

# ランディングページ
### Open
![open.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/a84cd65e-1775-f3b3-3071-7264d2b8a39e.png)

公式サイト:https://open.cruip.com/
github:https://github.com/cruip/open-react-template

オープンソースプロジェクトやオンラインサービス向けにデザインされたランディングページのテンプレートです。ダークで洗練されたデザインであることや様々なコンポーネントを備えていることが特徴です。

### Ant Design Landing
![Ant design landing.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033130/7d54b2a3-3d53-6ed8-9a4e-265e489a8f0c.png)

公式サイト:https://landing.ant.design/
github:https://github.com/ant-design/ant-design-landing

Ant Design System　によって構築されたランディングページ用のテンプレートです。テンプレートの種類が豊富で、バナーやフッターなどのモジュールもたくさん備えられています。

# 参考文献
* [35+ Free React templates and themes](https://dev.to/davidepacilio/35-free-react-templates-and-themes-32ci)

# 終わりに
コンポーネントセットやテンプレートを上手に使って素敵なWebアプリケーションを作りましょう！