はじめに

最近スキマ時間にnext.jsの勉強をしているのですが、その際に見つけたUIコンポーネントライブラリが便利そうだったので紹介させてください。

shadcn/uiとは

shadcn/ui（しゃっどしーえぬゆーあい？って呼んでます。。。なんて読むのだろうか）とはRadixUIとTailwindcssを用いて作られた、自由度や拡張性の高いUIコンポーネント集です。

特徴

shadcn/uiの主な特徴ですが以下のようなものがあげられます。

1. 必要なコンポーネントのみ使用することができる（不要なコンポーネントをインストールしなくてよい）
2. サイズ容量が広くないため、サイトのレスポンスに影響が出づらい
3. カスタマイズ性が自由

といったものが考えられます。

必要なコンポーネントのみ使用することができる

いままでのコンポーネントライブラリはおおむねnpmパッケージ として配布されて、そのなかで一括管理されますが、shadcn/uiの場合はnpmの依存関係に影響しません。

代わりにCLIを通してプロジェクトに直でコンポーネントを配置する仕組みとなっています。

ボタンコンポーネントを使用したい場合、shadcn/uiは

npx shadcn-ui@latest add buttonを実行後、

指定したプロジェクトにbutton.tsxが配置されます。

それをインポートすればボタンコンポーネントを使用できるといった形です。

サイズ容量が少ない

こちらは見出しのままなのですが、必要なコンポーネントのみをインストールすることができるため、比較的少ない容量でリッチかつセマンティックなUIを準備することができます。

カスタマイズ性が自由

俗にいうヘッドレスUIの実装をもとに作られているので、既存コンポーネントの機能のみを使用したい場合であったり、UIデザインの変更が容易です。

またTailwind CSSを軸に組まれているので、直感的に好みのスタイルを組むことも可能となっています。

おわりに

2023 JavaScript Rising Starsでは、ランキング1位を取るレベルで各所で流行っているコンポーネント集でした。

自分はまだ使いこなすほどのプロジェクトや作品を作っていないので、少々浅い知識ではありますが簡単なご紹介でした。

Vercelでは今「v0」といったAI＋shadcn/uiを用いたサービスなんかも発信しており、より一般化してくる可能性がありますね。