導入する

npm のパッケージではなく、コードが手元のリポジトリにコピーされます。 コピーされたものは自分のコードなので、好きに変えられます。

最初に配信元を1度だけ設定します

components.json に @sashigane の在り処を書いてください。

{
  "registries": {
    "@sashigane": "https://sashigane-docs.vercel.app/r/{name}.json"
  }
}

これが無いと動きません。 名前空間を付けずに slot などと書くと、 CLI は**shadcn 自身のレジストリ**を探しに行きます。

3つの深さ

# トークンだけ
npx shadcn@latest add @sashigane/tokens

# コンポーネントひとつ（必要な共有物は一緒に来ます）
npx shadcn@latest add @sashigane/button

# 全部
npx shadcn@latest add @sashigane/base

見た目を使わずに、仕組みだけ入れる

モーダルの開閉とトーストの待ち行列は、コンポーネントとは別にインストールできます。

# 開閉だけ。モーダルの見た目は入りません
npx shadcn@latest add @sashigane/use-modal

# 待ち行列と寿命だけ。トーストの見た目は入りません
npx shadcn@latest add @sashigane/use-toast

自前の見た目を書きたいときに使ってください。 コンポーネントのほうを入れると、対応する仕組みは一緒に来ます。

コピー先

コンポーネントの中の参照は @/components/ui/...・@/hooks/...・@/lib/... に 書き換わってコピーされます。

必要な npm の依存（class-variance-authority / lucide-react）は、 CLI が一緒に入れます。

トークンだけでも動きます

トークンは変数だけではありません。 面の宣言（data-sg-surface）・塗り・オーバーレイ・ スケルトンの動きも入っています。React に依存しないので、 素の CSS でも、他のフレームワークでも使えます。

入れたら読み込んでください。

@import './styles/sashigane-tokens.css';

Tailwind から役割名（text-body bg-accent-subtle max-w-32rem など）を 使いたいときは、アダプタも読み込みます。

@import './styles/sashigane-theme.css';

コピー先で動くことを検査しています

1件ずつ入れたときに参照先が揃っていることと、 全部入れたコードがそのままコンパイルできることを、毎回確かめています。

前者が要ります——全部まとめて確かめるだけだと、 必要な共有物の書き漏れが、他のコンポーネントが持ってきたファイルで隠れます。

CLI で実際に入れて確かめるのは、配信先の URL が要るので手元で行います。 3つの深さすべてを入れ、置かれたコードがコンパイルできることを確認しています。