デジタル庁デザインシステム for Panda CSS は、デジタル庁が提供するデザインシステム新規タブで開きますをArk UI新規タブで開きますとPanda CSS新規タブで開きますで実装する非公式のプロジェクトです。

デジタル庁デザインシステム新規タブで開きます

日本の行政サービスにおける統一的なUI・UXを提供するために、デジタル庁が策定したデザインルールとコンポーネントガイドライン。アクセシビリティ、再利用性、統一感を重視しており、Figmaライブラリやコード実装指針が公開されている。

Ark UI新規タブで開きます

Chakra UI新規タブで開きますの開発チームが提供するアクセシブルでロジック主導のUIコンポーネントライブラリ。状態管理やキーボード操作などの機能を提供し、スタイルはユーザー側に委ねる「スタイルレス」な設計が特徴。ReactやVueなどのフレームワークに対応している。

Panda CSS新規タブで開きます

Chakra UI新規タブで開きますの開発チームが提供する型安全でテーマベースなCSS-in-JSライブラリ。Tailwindのようなユーティリティクラスを用いつつ、TypeScriptでの補完やスタイルの一貫性を保つ。レシピ（Recipe）や条件付きスタイルなどを使って、再利用可能なスタイルの構築が可能。

作成: 水戸地図新規タブで開きます

使い方

1. React + Panda CSSプロジェクトにプリセットをインストール

npm install --save-dev @cieloazul310/digital-go-pandacss-preset

2. 設定

panda.config.ts

// panda.config.ts
import { defineConfig } from "@pandacss/dev";
import { createPreset } from "@cieloazul310/digital-go-pandacss-preset";

export default defineConfig({
  presets: [createPreset("blue")],
  // ...pandaConfig
});

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "styled-system/*": [
        "./styled-system/*"
      ]
    }
  }
}

3. コンポーネントをcomponents/uiディレクトリに生成

npx @cieloazul310/digital-go-pandacss-cli add

実装状況