shadcn/ui型のコンポーネント集まとめ
こんにちは、Squadbaseでフロントエンド開発をしている三橋です。
みなさん、shadcn/ui使ってますか？😀
shadcn/uiは美しくシンプルなコンポーネント集であるだけでなく、「オープンコード」というコンセプトを提唱しています。これは、バンドルされたコンポーネント集をnpmを通じて配布するのではなく、ユーザーのコードベースにコードをコピーするというアプローチです。これにより、ユーザーは完成されたデフォルトを使うだけでなく、自身の用途に合わせたカスタマイズをすることができます。また、このオープンコードのコンセプトに沿ってコンポーネントを配布するためにCLIも提供しています。
本記事では、shadcn/uiと同様にオープンコードの特徴を持つコンポーネント集を紹介します。
Tremor
✅ ユースケース: ダッシュボードや社内アプリ
Tremorは、ダッシュボード構築のためのコンポーネント集です。美しいチャートが特徴です。先日、Vercelに買収されたことでも話題ですね。チャート部分にはRechartsを使用します。
Magic UI
✅ ユースケース: Webサイトやランディングページ
Magic UIは、美しいアニメーションを特徴に持つコンポーネント集です。アニメーション部分には motion (旧Framer Motion) を使用しています。
LangfuseやMillion.devのウェブサイトで使われているそうです。
Aceternity UI
✅ ユースケース: Webサイトやランディングページ
Aceternity UIも、美しいアニメーションを備えたコンポーネント集です。こちらもアニメーションにはmotionを使用しています。
Cursorのウェブサイトで使われているそうです。
Motion-Primitives
✅ ユースケース: WebサイトやWebアプリ
Motion Primitiveは、美しくシンプルなアニメーションが特徴のコンポーネント集です。その名の通り、Magic UIやAceternity UIに比べてシンプルで、既存のコードベースに組み込むのに向いていると感じます。また、オリジナルのshadcn/uiと似た雰囲気なのも良い点ですね。
Origin UI
✅ ユースケース: WebサイトやWebアプリ
Origin UIには、本家shadcn/uiよりももう少しバルクの大きいコンポーネントが揃っています。たとえばタイムライン表示やリッチなダイアログなど、気の利いたコンポーネントが嬉しいですね。
Cult UI
✅ ユースケース: WebサイトやWebアプリ
Cult UIは大胆なデザインとアニメーションが特徴です。また、Dynamic IslandやDockなど、Apple OSを模したコンポーネントもおもしろいですね。
React Flow
✅ ユースケース: フロー表示のあるWebアプリ
フロー型の表示に便利なReact Flowも、shadcn/ui CLIでのインストールに対応しています。フロー型のUIが必要な際には最適ですね。
Stripeのドキュメント、Attio、Typeformなどで使われているそうです。
assitant-ui
✅ ユースケース: AIチャット
AIチャット向けのコンポーネント集です。チャット画面のコンポーネントだけではなく、ファイルアップロードやスレッド管理など、ChatGPTのようなAIチャットアプリを作ろうと思った時に必要になる機能をカバーしています。
Discussion