shadcn/ui、コピーではなく自分のrepoに残るcomponent libraryへ変えたOSS

2023年、個人のside projectから

shadcn/uiは、Vercelのengineerであるshadcnが2023年1月に始めたpersonal side projectだった。

従来のcomponent libraryが実装をpackageの内側へ隠すのに対し、sourceを利用者のrepoへ置く発想を選んだ。出典

packageではなく、自分のコードへ

shadcnは「I own a computer.」とXのprofileで表現する開発者だ。出典

その短い言葉の通り、UIも所有できる形にした。

CLIを実行するとcomponentのTypeScript sourceがprojectへ入り、teamは自分のpull requestで修正をreviewできる。出典

配布の問題をregistryで解く

source ownershipだけでは配布が面倒になる。

そこでCLIとregistryを組み合わせ、custom componentsやhooksなどを同じ仕組みで配布できるようにした。出典

packageのversionに追随するのではなく、必要な部品を自分のproductに合わせて取り込む設計である。

AI-readyという次の文脈

公式docsは、open codeと一貫したAPIがAI toolにも読みやすいと説明する。出典

component libraryを「利用する」だけでなく、AIとdeveloperが同じsourceを読み、変更する環境へ広がった。

今も残る選択

このモデルは自由と引き換えに保守を利用者へ戻す。

Vercelの解説も、copied filesの更新はteam自身が判断すると明記している。出典

shadcn/uiの道のりは、便利なlibraryを作った話というより、UIの所有権と配布方法を組み替えた話だ。

UIを素早く整えたいfrontend teamは、既存component libraryの見た目や抽象化に縛られたくない。

一方で、accessibilityやresponsive behaviorをゼロから実装する余裕もない。

shadcn/uiはcomponentのsourceをrepoへ置き、TailwindやBase UI / Radixの部品を組み合わせることで、この二つの要求を両立する。

公式docsはopen code、composition、distribution、AI-readyを中核に掲げている。出典

つまり「完成品を借りる」のではなく「安全な初期値から自社UIを所有する」PMFである。

moatはruntimeの独自技術より、open codeのdistribution formatとecosystemにある。

component、registry、CLI、themeの組み合わせが実装・学習・再配布の共通言語になり、利用者が作ったcustom registryも同じ形式に乗る。出典

ただしOSSなのでforkは容易で、moatは標準化とブランドに依存する。

network effectは中程度に弱い。

利用者が増えるとcommunityのregistryやexamplesは増えるが、単一の共有データが増えないと使えないサービスではない。出典

そのため本質はnetwork effectより、互換性のあるdistribution standardによるecosystem effectである。

主なtargetは、React系frameworkでproduct UIを作るfrontend team、design systemを自社コードとして管理したいstartup、そしてAI coding toolとsource codeを共有したい開発者である。

反対に、React/Tailwindを採用できないteamや、vendorが全更新を保証する完成品libraryを求めるteamには向きにくい。出典

第一は、npm packageではなくsource codeを配布する技術選択だ。

teamはbutton.tsxなどを自分のrepoでreviewし、必要な差分だけ変更できる。出典

第二は、CLIとregistryで配布経路を標準化したこと。

componentのownershipを保ったまま、導入手順は短くできる。出典

第三は、AIが読める一貫したsourceを公開したこと。

最大の課題は、sourceを所有する代わりにmaintenanceも引き受ける点だ。

upstreamの更新はnpm updateのようには届かず、teamが差分を判断して取り込む必要がある。出典

またTailwindやReact frameworkへの依存は、既存stackを変えられない組織には導入障壁になる。

公式に商用supportやproject revenueは開示されておらず、持続可能性の構造は要確認である。

獲得はGitHub、docs、Vercelとの接続、そして開発者が実際にcomponentを使って公開する可視性のループで進む。

Vercelのguideも、2023年のside projectからReact communityとAI-assisted developmentの文脈で広がったと説明する。出典

CLIが導入を短くし、source ownershipが継続利用を促す。

一方、無料OSSのままでは収益化と保守体制のトレードオフが残る。

主要チャネル: github, vercel, twitter, community

抽象化を増やすだけがdeveloper experienceではない。

shadcn/uiは、編集可能なsourceを配布し、ownershipを利用者へ移すことで、customizationと導入速度を両立した。出典

プロダクト設計では、機能を隠すことではなく、変更したい境界を開くことが差別化になる。

日本向けに展開するなら、企業内design systemのmigrationと運用を支える文脈を足すとよい。

OSS componentの導入手順を日本語化するだけでなく、アクセシビリティ、ブランドtoken、複数プロダクト間の更新管理をテンプレート化する。

公式docsがtheme tokenやregistryを分けて説明する設計は、日本企業の承認フローにも接続しやすい。出典