デジタル庁デザインシステム v.1.4.2のコンポーネントの一部をReact / Tailwind CSSベースで実装したサンプル集です。

このリポジトリでは全てのコンポーネントは実装していません。
（定期的にサンプルは追加予定です。）
未実装のコンポーネントについてはスクラッチで書かずに、以下のようなヘッドレスUIライブラリの利用を推奨します。

• React Aria
• Radix UI
• Headless UI

スクラッチで書く場合は、ARIA Authoring Practices Guide (APG)のPatternsを参考にして実装を進める事を推奨します。

以下のコマンドでStorybookを実行してください。

npm install
npm run storybook

• Tailwind CSS
• @digital-go-jp/tailwind-theme-plugin

@digital-go-jp/tailwind-theme-plugin は、デジタル庁デザインシステムのデザイントークンをベースにしたTailwind CSSのプラグインです。

プラグインで定義されるトークン一覧は、トークン一覧 をご確認ください。

プロジェクト固有のトークン等については tailwind.config.js の extend で拡張してください。

• サンプルコードは Google Chrome / Microsoft Edge / Safari / Firefox の最新版で動作を確認しています。
• サンプルコードはプロジェクトの特性に合わせて自由に拡張してください。

ご興味を持って頂きありがとうございます。
リリース直後のため、現在体制がまだ整っておりません。
そのため、何かお気づきの点やご要望がございましたら、まずはIssueの作成をお願いします。PRはそのIssueでの議論が終わった後に作成してください。
また、現時点ではコンポーネントそのものに関するIssueのみを受け付けておりますので、予めご了承ください。