📝きょうの学習
Next.jsを勉強していた時に使っていたUIライブラリ「Shad/cn」をおさらいしていきます。あらためてShad/cnってなに？ってChatGPTに聞いてみた。
shad/cnは、Vercelに所属するエンジニアによって開発されています12. このプロジェクトは、Radix UIとTailwind CSSを組み合わせたコンポーネントのカタログであり、カスタマイズ性に定評があります。
通常のコンポーネントライブラリとは異なり、shad/cnはnpmパッケージとして配布されていないため、依存関係に影響しません。代わりにCLIを通じてプロジェクトに直接コンポーネント（コード）を配置する仕組みを採用しています。この方法により、コードの所有権と制御をプロジェクト開発者に提供し、コンポーネントのビルドとスタイリング方法を自由に決定できます。
簡潔に言えば、shad/cnはデザインシステムをコードとして宣言するメカニズムであり、必要なコンポーネントを都度プロジェクトに取り込むことができます。カスタマイズ性に優れ、フロントエンドの実装に時間をかけたくない開発者にとって便利な選択肢です。
長いよ…。簡単に言うと
Radix UIとTailwind CSSを組み合わせて実装されている
カスタマイズしやすい
コードの所有権は実装者のもの（これは公式にも書かれている）
という感じです。MUIやChakraUIのようにコンポーネントをそのまま使うイメージとはやや異なります。こんな風に↓ソースがダウンロードされるんですよ。インストールしてみると分かります。
💻インストール
公式サイトのDoc / installationを見ながらインストールします。Remix用のドキュメントもあります。
コマンドを打ちます。
npx shadcn-ui@latest init
質問項目に回答していきます。base colorどうする？っていうのが迷うけど、とりあえずデフォルトのままにした。全部デフォルトのまま。
Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › app/tailwind.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › ~/components
Configure the import alias for utils: › ~/lib/utils
Are you using React Server Components? › no
ベースカラーを変えたいときは「CSS variables」をYesで選択したときはglobal.cssを修正すればよいようです。Noを選択したときはすべてインストールし直しとのこと。
cssVariablesがtrueに設定されている場合、globals.cssファイル内にcss変数を生成するために使用されます。 cssVariablesを使用せずに新しいコンポーネントを追加すると、そのベースカラーは設定ファイル内のものと同じになります。そのため、ベースカラーを変更したい場合は、すべてのコンポーネントを再インストールする必要があります
で、先ほど挙げたRemix用のInstallationページの「７．That's it」までていねいに進めます。
🎉できた
なんか、初期のスタイルダサいね。こんなだっけか…？
今日はここまで。
🍚きょうのごはん
きょうの夕飯は麻婆豆腐です。いつもちくわを入れてます。ちくわを入れると意外と味がぐっときわ立って美味しいんですよ。おすすめ。ちなみにウィンナーはダメです。脂っこくなってすごく癖が強くなります。