構成

このプロジェクトは以下の3つのパッケージで構成されています。

基礎プリセット

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

デジタル庁デザインシステムのTailwindテーマプラグイン新規タブで開きますを基に作成したPanda CSSのプリセット。カラー、タイポグラフィなどのテーマが使用可能。コンポーネントのレシピは含まれていない。

コンポーネントプリセット

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

デジタル庁デザインシステムのReactサンプルコンポーネント新規タブで開きますやFigma新規タブで開きますを基に作成したコンポーネントのレシピで構成されるPanda CSSのプリセット。Ark UI新規タブで開きますと共に使用することが前提。

コンポーネントコレクション

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

デジタル庁デザインシステムのコンポーネントをPanda CSSでスタイリングしたArk UIのコンポーネントコレクション。shadcn/ui新規タブで開きますやPark UI新規タブで開きますのようにコードスニペットをプロジェクト内のディレクトリに生成して使用する。