Sparkle Design for React

Sparkle Design for ReactはSparkle Designで定義されたコンポーネント群をReactで利用可能にするコンポーネントライブラリです。

shadcn/uiをベースに作られており、shadcn/ui registryによる機能を活用することもできます。詳細な使い方は以下のリポジトリを参照してください。

GitHub - goodpatch/sparkle-design: Sparkle DesignのReact実装Sparkle DesignのReact実装. Contribute to goodpatch/sparkle-design development by creating an account on GitHub.

github.com

導入方法

Sparkle Design for Reactを導入するには、2つの方法があります。用途に応じて選択してください。

npm パッケージとして導入

全コンポーネントをまとめてインストールします。

npm install sparkle-design

コンポーネントはパッケージから直接インポートして使用します。

import { Button } from "sparkle-design";

shadcnレジストリから個別に追加

必要なコンポーネントだけを選んで追加できます。コンポーネントのソースコードがプロジェクトにコピーされるため、自由にカスタマイズが可能です。

npx shadcn@latest add @sparkle-design/button

追加されたコンポーネントは src/components/ui/<component-name>/index.tsxに配置されます。ローカルファイルとしてインポートします。

import { Button } from "@/components/ui/button";

npm パッケージ版はそのまま使いたい場合に、shadcn版はコンポーネント単位で導入したい場合に適しています。

スタイルのセットアップ

Sparkle Design のスタイルを適用するには、CSS 生成ツールでプロジェクトに合った CSS
を生成し、グローバルスタイルに読み込みます。
またフォントに関してはhead要素に読み込むコンポーネントを生成します。

1. 設定ファイルを用意する

プロジェクトルートに sparkle.config.json を配置します。Figma の Sparkle Design Theme Settings プラグインから書き出すか、手動で作成してください。

{
  "primary": "blue",
  "font-pro": "Noto Sans JP",
  "font-mono": "Noto Sans Mono",
  "radius": "md"
}

設定項目：

primary : プライマリカラー（blue, red, orange など）
font-pro : プロポーショナルフォント（Google Fonts の名前）
font-mono : モノスペースフォント（Google Fonts の名前）
radius : 角丸設定（sm, md, lg など）

2. CSSとフォント読み込み用コンポーネントを生成する

以下のコマンドで sparkle.config.json の設定に基づいた CSS を生成します。

npx sparkle-design-cli generate

このコマンドはプライマリカラー、フォント設定、角丸設定などのデザイントークンから sparkle-design.cssファイルと SparkleHead.tsx ファイルを生成します。

またTailwindのエントリポイントCSSには自動で必要な記述を追加します。

3. SparkleHeadを配置する

生成されたSparkleHeadは全体の <head> に相当する場所に配置してください。

import { SparkleHead } from "./SparkleHead";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <SparkleHead />
      </head>
      <body>{children}</body>
    </html>
  );
}

基本的な使い方

コンポーネントの使用例

import { Button } from "sparkle-design";

export function SaveForm() {
  return (
    <div className="flex gap-4">
      <Button variant="outline" size="md">
        キャンセル
      </Button>
      <Button variant="primary" size="md">
        保存する
      </Button>
    </div>
  );
}