shadcn/uiのレジストリを試してみる

はじめに

ついこの間、実験機能としてリリースされました。
shadcn/uiのレジストリを自分でホストすることで、自作のコンポーネントをshadcn CLI経由でインストールすることが できるようになります。

v0で使えるのもいいですね。

実際にshadcn CLI経由でインストールできるライブラリをいくつか紹介します。

(diceuiとved-uiのドキュメントはfumadocsを使ってるヨ)

要件

You are free to design and host your custom registry as you see fit. The only requirement is that your registry items must be valid JSON files that conform to the registry-item schema specification.

ドキュメントにこのような記述がある通り、各コンポーネントに対してregistry-item.jsonのスキーマに準拠したJSONが必要になります。

公式がテンプレートを用意してくれています。

registry-item.jsonの作成について

要件にある通り、各コンポーネントに対してregistry-item.jsonが必要になります。

ただ、一々このJSONを書くのも面倒ですよね。 自動生成してくれるスクリプトを用意してくれています。

bun add shadcn@canary

{
  "scripts": {
    "registry:build": "shadcn build"
  }
}

bun registry:build

こちらを利用するには、registry.jsonが必要になります。

ただし、registry-item.jsonのスキーマに準拠したJSONのビルドシステムがあるならregistry.jsonはいらないです。

実際に、例として紹介したdiceuiでは以下のようなスクリプトで自動生成しています。

レジストリの種類について

実はUIコンポーネントに付随して、色々ホストすることができます。

ドキュメントを和訳したものですが、載せておきます。

レジストリをホストしてみる

一旦テンプレートリポジトリをそのまま使ってリポジトリを作りました。

Vercelでホストしていて、ドメインを割り当てました。
v0で開けるように環境変数にNEXT_PUBLIC_BASE_URLを設定しました。

実際にCLI経由でインストールしてみる

早速Next.jsのプロジェクトを作成します。

bun create next-app@latest

次にshadcn/uiを初期化します。

bunx --bun shadcn@latest init

shadcn CLIからコンポーネントを追加します。

$ bunx --bun shadcn@latest add https://ui-sample.runfunrun.xyz/r/hello-world.json
✔ Checking registry.
✔ Installing dependencies.
✔ Created 2 files:
  - src/components/hello-world.tsx
  - src/components/ui/button.tsx

しっかり追加できたことが確認できます。

$ tree src/components
src/components
├── hello-world.tsx
└── ui
    └── button.tsx

2 directories, 2 files

最後に

現在かなり勢いがあるshadcn/uiですが、レジストリを自分でホストできるとなるとエコシステムとしてかなり大きくなりそうです。
もう少し安定したら企業で使うための共有コンポーネントでも使うことができそうです。
個人開発者の方も自分のコンポーネントを共有する良い選択肢ではないでしょうか。

ではまた。

最終更新日:2026/01/20