Storybookのコンポーネントの百科事典 Component Encyclopedia

こんにちは森田です。
今回は様々な企業やプロジェクトの Storybook で作られたコンポーネントライブラリを見ることができる Storybook Component Encyclopedia を紹介します。

Component Encyclopedia

Component Encyclopedia は Storybook の公式サイトのメニュー「Showcase」から見れる公式のデザインシステムのリンク集です。

Microsoft, Adobe, Shopify, AirBnb など有名企業のコンポーネントライブラリを見ることができます。

Component Encyclopedia の検索

プロジェクト別

Microsoft, Adobe, Shopify, AirBnb など有名企業のコンポーネントライブラリを見ることができます。

現在は約100プロジェクトが登録されていました。

Adobe Spectrum Web Components を見てみます。

日本企業では SmartHRさんのデザインシステムを見ることができます！

用語集

アコーディオン、アラートボタンなど用語、機能などで絞り込んで見ることができます。

ボタン一覧

ボタン一覧を見てみます。
そこからさらにフレームワークやCSSで絞り込むことができます。

様々なプロジェクトを横断して特定のコンポーネントを見比べることができるので大変便利ですね。とても参考になります。

タグ絞り込み

他にも、タグで React や Vue で絞り込めたり、Sass や Styled components のタグもあるのでフレームワークや技術スタックで絞って見ることもできそうです。

Component Encyclopedia に登録するには？

申請フォームから申請することで追加されるそうです。
おそらく審査などはありそうです。

弊社もデザインシステムを作ったら申請してみたいです。

まとめ

デザインや実装に悩んだら Component Encyclopedia を見にいくと良さそうです。

今後も沢山のプロジェクトが追加されることを期待しています。