UIライブラリをFigma UI Kitと併せてまとめてみましたよっと
UIライブリまとめる必要があったのでついでにここで公開✌
基本NextjsとかSever component前提の情報かも
アプリケーション系
Webなどのアプリケーション全体のUIを構築するのに活躍しそうなものたち
Chakra UI
結構王道かも。見た目も振る舞いも提供してる。
筆者は結構業務で使ってるけど、実装量が多いと開発サーバーでかなり動作が重たくなってしまう印象。結構つらい。
Server componentsにはいまは対応できていないが、今後内部で利用しているemotionを剥がすなどして対応させていくとのこと
UI Kit
公式も紹介してるしよさそう。
MUI
こちらも王道かも。見た目も振る舞いもがっつり提供してる。MATERIAL Designを表現したいならこれ以外選択肢しらんかも。
UI Kit
公式が配布してそう
Radix
Nextjs周辺のエコシステムと相性がよさそうな印象を持っているが、真偽はしらない。見た目も一部提供してるようだが、基本は振る舞いの提供が中心ぽい？ヘッドレスコンポーネントライブラリのよう。
Server componentsについて積極対応はしてなさそう？
UI Kit
tailwindと合体した表現になってるやつなら見つけた
NextUI
こんな名前謳ってるわりに、Server componentsには対応できてないぽい。
Sever Componentへの向き合い方はRadixと同じそう
tailwindcss※
※たぶんこれはUIライブラリではないけど、UIをスタイリングするのを楽にする方法を提供してくれてる中で有名なやつなので紹介
宗派によって分かれるぽいけど、個人的にはすきなやつ。tailwindcssのみで大規模プロジェクトを構築するとかなりしんどいが、ヘッドレスコンポーネントライブラリと組み合わせて使うと相性がよさそう。また、小規模プロジェクトの開発はtailwindcssのみでも破綻しない印象。
UI Kit
それっぽいのあった
VSCodeプラグイン
これあるとめちゃ捗るのでおすすめ
Saas UI
Chakra UIベースの管理画面特化のライブラリのよう。
UI Kit
見つからんかった
個人的な感想
Chakra使いやすいし、NextjsとかVercelに乗っかっていこうとしてるから推したいけど、開発中すぐ重たくなる実体験があるからちょっとつらい。
Radix + tailwindcss使ってみたい。ただこの場合デザインリソースが少ないから、デザイナーがデザイン作るのは大変やったりするんかな？
チャート表現系
ダッシュボードや、インフォーメーショングラフィックの表現に必要なものを提供してくれるものたち
tremor
読み方わからんけど、ダッシュボード作るのに特化したUIライブリのよう
UI Kit
Chart.js
言わずとしれた王道。色々対応してるけど、ラッパーとかいっぱいあってよくわからんくて個人的にそんな好きくない
Reactに対応させるためのやつ
UI Kit
探したけどこれくらいしか見つからんかった。あってるんかな
最後に
他にいいのあったら教えてください！Chart系とか特に。Nextjsと相性いいよとか、Server componentsと相性いいよとか！
Discussion