React サンプルコンポーネント

デジタル庁デザインシステム のコンポーネントの一部を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 の最新版で動作を確認しています。
• サンプルコードはプロジェクトの特性に合わせて自由に拡張してください。

Issues, Pull Requests

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