OSS探訪
GitHubで見るプロジェクトサイト

コンポーネントのソースをプロジェクトへ取り込み、自分のUIライブラリとして育てる

OSS規模スコア 336.0OSS健全度 89更新ペース 46 Commit/30日
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
124,865
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/29
ページ内ナビ

概要

shadcn/uiは、完成済みパッケージを依存関係として隠すのではなく、選んだUIコンポーネントのソースをプロジェクトへ取り込み、用途に合わせて編集・拡張していくための仕組みです。CLIは初期設定、コンポーネント追加、registry検索、差分確認などを支援します。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

主な特徴

必要なコンポーネントのソースを手元へ追加する

shadcn CLIのinitでプロジェクトを設定し、addでButtonなど必要なコンポーネントを取り込みます。追加されたコードは自分のプロジェクト側に置かれるため、実装を読み、要件に合わせて変更できます。

出典：[2][3]

追加前にdry-runやdiffで変更内容を確認する

CLIはadd --dry-run、--diff、--viewを提供し、書き込み前に追加対象のファイルやCSS差分を確認できます。既存コンポーネントを更新するときも、上流との差分を見ながら取り込めます。

出典：[3]

向いている用途

自社のデザインシステムや業務UIをコードとして所有したいチームに向く

既製コンポーネントを出発点にしつつ、見た目、挙動、アクセシビリティ、設計規約を自分たちのコードとして管理したいReact系プロジェクトに向きます。READMEも「自分のコンポーネントライブラリを作る」用途を中心に説明しています。

出典：[2]

導入前の確認

CLIが書き換えるファイルを確認してから適用する

initやaddは設定、依存関係、コンポーネント、CSSなどプロジェクト内のファイルへ変更を加えます。既存プロジェクトではinfoで構成を確認し、--dry-runや--diffで変更予定を確認してから適用する方が安全です。

出典：[3]

取り込んだコードの保守もプロジェクト側で担う

コンポーネントのソースを所有できることは長所ですが、ローカルで変更した部分と上流更新をどう統合するかはチームの責任になります。更新時は上流との差分を確認し、必要な変更だけを取り込む運用が必要です。

出典：[2][3]

参考にした公式資料

  1. [1]shadcn-ui/ui repository(2026-09-30)
  2. [2]shadcn/ui README(2026-09-30)
  3. [3]shadcn CLI reference(2026-09-30)
  4. [4]shadcn/ui MIT license(2026-09-30)
編集部からの補足

パッケージの内部を拡張するのではなく、コンポーネントのソース自体を手元で所有する設計が特徴です。既存プロジェクトへ追加するときは、CLIのdry-runやdiffで変更範囲を確認してから取り込むと安全です。

3ステップで試す

  1. 1

    プロジェクトをshadcn向けに初期化

    既存プロジェクトで実行し、components.jsonや必要な依存関係、CSS設定を作成します。利用中のpackage managerに合わせたrunnerへ置き換えて構いません。

    npx shadcn@latest init
  2. 2

    Button追加の変更内容を事前確認

    ファイルを書き込まず、追加対象や変更範囲を確認します。必要に応じて--diffも使えます。

    npx shadcn@latest add button --dry-run
  3. 3

    Buttonのソースをプロジェクトへ追加

    確認した変更を適用し、生成されたcomponents/ui/buttonを読み込んで画面へ配置します。

    npx shadcn@latest add button
公式READMEで確認

成長

成長の推移 · 直近30日

124,865 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）
46
Open PR
1,015

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
GitHubで見る

GitHub Topics

  • components
  • nextjs
  • radix-ui
  • react
  • tailwindcss
  • ui
  • shadcn
  • base-ui
  • laravel
  • tanstack
  • vite
  • react-aria
Stars
124,865
Forks
11,799
Watchers
425
Open Issues
810
Contributors
469
所有者種別
Organization
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/29
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。

このページを読んで、次に何をすればよいか分かりましたか？