shadcn/ui調べてみる

shadcn シャットシーエヌ/uiはReact用のUIコンポーネントコレクション(ライブラリではないらしい)で、Radix UIを基に構築されています。また、shadcn/uiが提供するComponentはTailwindのutilsクラスを使って拡張することができます。

基本的な特徴

コンポーネント
2024年1月時点で、40個以上のコンポーネントが提供されています。Accordion、Skeleton、Tableなどがあるようです。(ただし、サイトに載ってるChartとかはまだ無い。今はrechartsらしい。)
ComponentはCLIで以下のようにして追加できます。

npx shadcn-ui@latest add [component]

デザイン
全てのComponentは既にFigmaに用意されています。個人的にはこれが結構嬉しい。
https://ui.shadcn.com/docs/figma

カスタマイズ性
コンポーネントを直接編集します。
Themeの変更もCSS Variablesに全てまとまっているので、すぐに対応可能です。

shadcn/ui

ただし、CSS Variablesに無いものは自前で用意してComponentも自分たちで改修する必要があります。

やってみる

やってみよう

タイトル未設定

採用しても良さそうな時

• 0から開発スタートする場合

  • shadcn/uiを入れる。FigmaのUIカタログを使う。最初にthemeを決めてFigmaと実装を揃える。みたいな動きができるとそれっぽいwebページを爆速で作れそう。

• これまでMUI, Chakraなどを使ってて、これから自作する場合

  • これから自作するって場合も、既にheadless uiコンポーネントライブラリのRadixが入ってるし、生成したComponentをカスタマイズすればいいだけなので、すばやく作れそう。

  • あと、1つずつComponentを追加してったりが可能なので順次適用みたいな手段も取れる。

懸念点

• shadcn/uiで生成したcomponentをガンガン自分たちで拡張した場合、shadcn/ui本体のアップデートに追従しにくい問題がでてきそうな印象。

  • 生成したcomponentは直接触らずwrapperでclassなどを注入するみたいな設計に変えたりとかは考えてもいいかもです。

• npx shadcn-ui diff で差分検知もできそうではあります。

• Radix UIとTailwindは最低限知っとく必要があります。まぁ知っておこうw

まとめ

MUIやChakraだとComponentの数多い割に実際に使う種類はそんなに多く無いし、Headless UIやRadix UIだけにすると、今度は全部見た目を用意してくの面倒だなと思ったりしてたので、個人的には、すごくちょうどいいUIコンポーネントライブラリだと思います！！！