💈

NextUI / Mantine / react-daisyUI - 2022年12月時点で React の UI フレームワークを調べた

2022/12/21に公開

定期的にCSSフレームワークの動向調査し隊隊員です。

タイトルのとおり、React における CSSフレームワーク(UIライブラリ、ツールキット含む)の動向に変化があるかな?と思いざっくり調べてみたところ、以前から知っていたもの、そうでないものも合わせて3つほど気になるものがあったのでピックアップしてみます。

いずれも使い込んだわけではない個人のざっくり感想です。MUIChakura については僕のなかで既知だったので今回は取りあげていませんが、両者ともに依然として有力選択肢かと思います!

NextUI

https://nextui.org/

Next.js の Vercel チームがつくっている UI ライブラリ。GitHub リポジトリのスターは 8.6k を超えています。

https://github.com/nextui-org/nextui

NextUI は以前から気になっていたので、簡単なツールをつくるがてら使ってみました。

https://github.com/iktakahiro/whoami

適度にスタイリッシュな UI をとにかく早く組むという目的には非常にマッチしていると思います。いっぽうBETA版ということで、コンポーネントの充実度はまだこれから、できないことははっきりできないという仕上がりなので、一定規模のプロジェクトに投入するには結構勇気が要るかなと感じました。

Mantine

https://mantine.dev/

今回初見でした。読み方は某ポケモンと同じマンタイン

GitHub リポジトリのスターは 16.3k(!)

https://github.com/mantinedev/mantine

スタイルはパフォーマンス重視なのかモダンながらすっきりしており質実剛健という印象。カレンダーなどの日付関係のコンポーネントも揃っています。

UI の管理に関係する Hooks をセットで提供しているのがあたらしいなと思いました。use-click-outside とか、これ欲しいやつやみたいなのが結構ありそう。

カスタマイズの幅の広く、小さく使うにも本格的に使うにも良さそうかも、と思いました。

react-daisyUI

CSSフレームワークとして人気を博している daisyUI の React特化版。Tailwind派閥ですね。

https://react.daisyui.com/

daisyUI は一度見たことがありましたがこちらは初見でした。GitHub リポジトリのスターは300超で Mantine には及びませんが、本家 daisyUI はスター16k超えなのでこれから人気が出るかもですね。

https://github.com/daisyui/react-daisyui

モック(スマホに画像あてるやつとか)を表現するためのコンポーネントが用意されているのがユニークですね。


いつの間にか選択肢が増えていて、選定も楽しくなりそうですね。Mantine を触ってみようと思っています。

Discussion