ycu-engine / DSC-Blog-Frontend

データサイエンス倶楽部ブログ フロントエンド
MIT License
0 stars 0 forks source link

✨コンポーネントライブラリ(shadcn/ui)の導入 #14

Closed nyatinte closed 11 months ago

nyatinte commented 11 months ago

🎉 概要

プロジェクトにおけるUIライブラリとして、美しいshadcnUIを採用しましょう!🚀

📚 shadcnUIとは?

shadcnUIは、一般的なコンポーネントライブラリとは一味違います。再利用可能なコンポーネントのコレクションで、npm経由で配布される依存関係としてインストールするものではなく、必要なコンポーネントを選択し、そのコードをプロジェクトにコピー&ペーストする形で使用します。そのコードは自由にカスタマイズ可能で、開発者自身のものとなるんです。これを参照にして、自身のコンポーネントライブラリを構築することができますよ!

🌈 Radix UIとは?

Radix UIは、高品質でアクセシブルなデザインシステムとWebアプリケーションを構築するためのオープンソースのUIコンポーネントライブラリです。アクセシビリティ、カスタマイズ、開発者体験に焦点を当てた低レベルのUIコンポーネントライブラリで、これらのコンポーネントをデザインシステムの基底層として使用するか、徐々に採用することができます。Radix UIは、アクセシビリティに関連する難しい実装詳細、フォーカス管理、キーボードナビゲーションなどを含むWAI-ARIAのデザインパターンに可能な限り準拠しています。

🎯 目的

shadcnUIは美しく設計されたコンポーネントを提供しており、これらのコンポーネントをアプリケーションに直接組み込むことが可能です。これにより、UI開発の効率化と品質向上を目指します。

💡 提案内容

shadcnUIはRadix UIとTailwind CSSを基に構築されたコンポーネントを提供しています。これらのコンポーネントはアクセシブルで、カスタマイズ可能で、オープンソースです。他の一般的なUIライブラリ(例:ChakraUI、MUI)と比較して、アクセシビリティを重視しながら、Headlessとしての柔軟なカスタマイズ性もあります。

📝 タスク

参考