ボタンや入力欄、まだ一から書いてる？「デジタル庁コードスニペット」

どんなアプリか

デジタル庁デザインシステムをプレーンなHTML/CSS/JavaScriptで実装したサンプル集です。

デジタル庁、GitHub リポジトリの README

デジタル庁が GitHub で公開している、デジタル庁デザインシステムの UI 部品のサンプル集です。README には、特長としてデザインシステムへの準拠、フレームワーク非依存、カスタマイズ可能、後付け可能、シンプルな実装が挙げられています。

部品はボタンやテキスト入力などのフォルダに分かれています。それぞれのフォルダに、スタイルシート、HTML のサンプル、必要な場合の JavaScript、Storybook のストーリー、ドキュメントが入っています。

各部品の動作やスタイル、使い方、実装上の注意点は、公開されている Storybook でも確かめられます。手元では npm install のあと npm run storybook を実行し、ブラウザで http://localhost:6006 を開くとすべての部品を確認できると説明されています。

料金とデータの置き場所

MIT ライセンスで公開されています。

入れる前に

不具合や機能の要望は Issue で受け付けています。Pull Request は、README によれば現時点では受け付けていません。