はじめに

デザイントークンと React コンポーネントのセット。コードをコピーして使う

sashigane は、**デザイントークン（CSS 変数）**と、それを使う React コンポーネントのセットです。

npm パッケージとしてインストールするのではなく、shadcn の CLI で ソースコードが自分のリポジトリにコピーされます。 コピーされた時点で自分のコードなので、そのまま書き換えられます。

すぐ試す

配信元を components.json に1度書きます。これが無いと動きません。

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

あとは欲しいものを名前で足すだけです。

npx shadcn@latest add @sashigane/button

コピー先や、まとめて入れる方法は導入するにあります。

色は OKLCH で作ってあり、明度の段が揃っています。役割の名前で書けば、ライトモードでもダークモードでも読める組み合わせになります。

面の深さは data-sg-surface で宣言します。宣言すると、背景と前景が一緒に 深くなります。

<body data-sg-surface="page">
  <article data-sg-surface="surface">…</article>
</body>

背景だけを塗る方法は用意していません。塗れてしまうと前景が浅いまま残り、 読みにくい組み合わせができても何も起きないからです。

余白・字の大きさ・角丸・影は、root = 16px を基点に1つの規則から作られています。 値を選ぶ場面がないので、別々に作った画面でもサイズが揃います。

トークンだけを入れれば、素の CSS で使えます。 面の宣言・塗り・オーバーレイ・スケルトンの動きまで CSS に入っているので、React 以外でも動きます。

npx shadcn@latest add @sashigane/tokens

すべてのコンポーネントが data-sg-component に自分の名前を出します。見た目は持ちません。

<button data-sg-component="button" class="…">
<div data-sg-component="card" data-sg-surface="surface" class="…">

組み立てられたクラス名に頼らずに、CSS からもテストからもコンポーネントを狙えます。

[data-sg-component="card"] { /* … */ }

asChild で要素を差し替えても**data-sg-component は子へ移ります**。要素が変わっても、何であるかは変わりません。

このシステム固有の呼び方がいくつかあります。先に読んでおくと、以降のページが早く読めます。

語	指すもの
ランプ	1つの色相を明るい側から暗い側まで11段に並べたもの（color ramp）。`danger` なら `--sg-danger-100` から `--sg-danger-950` まで
段	ランプやスケールの中の1つ。`100` `200` … のような刻み
面	背景と前景の組。`page` / `surface` / `inset` / `overlay` の4つがあり、`data-sg-surface` で宣言します
塗り	背景と前景を対で決める色の当て方。`data-sg-fill` で宣言します
淡い塗り	色のついた薄い地。バッジやアラートの背景に使います
トーン	どの意味の色を使うか。`accent` / `danger` / `warning` / `success` / `info`。コンポーネントでは `tone` で渡します
動きを減らす設定	OS の「視差効果を減らす」「アニメーションを減らす」設定。CSS からは `prefers-reduced-motion: reduce` として見えます。このシステムのアニメーションは、この設定を自動で尊重します

人が読む URL の末尾に .md を足すだけで、同じページが素の Markdown で返ります。

/docs/components/badge      人が読む
/docs/components/badge.md   AI が読む

一覧は /llms.txt、全文をまとめたものは /llms-full.txt にあります。

見た目をまとめて確かめたいときはデモページ、色を触ってみたいときはテーマビルダーがあります。

このデザインシステムは、なぜその値なのか・なぜその形なのかの記録を成果物の一部として残しています。決定の全文と退けた案はリポジトリの docs/ にあります。