shadcn/uiの気になるところ
開発環境
- next 14.1.0
- tailwindcss 3.3.0
前提
細かな利用手順は説明しません。
断片的に気になった点を紹介している記事になります。
インストールと初回設定の手順は以下のように実行済みを前提に進めます。
$ npx shadcn-ui@latest init
Need to install the following packages:
shadcn-ui@0.8.0
Ok to proceed? (y) y
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Would you like to use CSS variables for colors? › yes
✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...
Success! Project initialization completed. You may now add components.本題
最近よく話題に出るshadcn/uiを触ってみて、利用する上で良くも悪くも気になるなと思う点がいくつかあったので紹介します。
正直なところ、デザインは後から考えるフェーズのプロジェクトや、個人開発レベルでは、特にカスタマイズせずにそのまま利用しても爆速で開発できると思います。
気になる① 色に制限をかけたい
前提で記載した初期設定を行うと、自動的にtailwind.config.tsが書き変わります。
import type { Config } from 'tailwindcss';
const config = {
darkMode: ['class'],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
prefix: '',
theme: {
container: {
center: true,
padding: '2rem',
screens: {
'2xl': '1400px',
},
},
extend: {
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
...省略
ライブラリ制作者として汎用的にアプリケーションに組み込むためにこのように既存色を利用しつつ拡張することを想定していると思う（個人的な意見）ので、納得ではあります。
ただ、アプリ全体の色に統一感を持たせるためにtext-red-100などのデフォルトクラスは利用できない方が良いです。
その場合、extendを抜いてあげれば定義した色以外は利用できなくなるのでおすすめです。
import type { Config } from 'tailwindcss';
const config = {
darkMode: ['class'],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
prefix: '',
theme: {
container: {
center: true,
padding: '2rem',
screens: {
'2xl': '1400px',
},
},
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
...省略色を追加したい場合はこちらも参考にしてください。
気になる② テーマカラーのカスタマイズが難しい
初期設定時にコマンドラインで以下質問に答えることでテーマカラーを設定できます。
Which color would you like to use as base color? › Slate上記はSlateを選択した例です。
他も合わせると12色のバリエーションを公式が用意してくれているので、ありがたいです。
また、後からテーマを変えることもでき、こちらからコードをコピーして直接ファイルを書き換えてあげれば変更できます。
ただ、公式のものをそのまま使うのもアレだな・・って思った時、自分でバランスを考慮しながら色の組み合わせを考えるの難しいです。
なので、こちらは公式ではないですが、便利なサービスが2つあったので紹介します。
どちらも自分でベース色を決めて自動で色を生成しくれるツールです。
気になる③ vscodeでカラーハイライトできない
初期設定時に自動的にglobal.cssが書き変わります。
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
}
}
shadcn/uiではCSSで数値を変数化し、tailwind.config.tsで変数を展開する方式をとっています。
これは私の調査不足もあるかもしれませんが、よくあるvscodeの拡張機能でカラーハイライトなどありますが、この方式でハイライトされるやつが見つからない・・
こちらについては良い方法がわからないので教えてもらえると嬉しいです・・
気になる④ マルチセレクトがない
個人的にはあって欲しいコンポーネントの一つですが、現時点（2024/3）ではないようです。
これからどんどん充実していくと思われますが、自分が欲しいなと思ったコンポーネントがない場合は自作することになります。
ただ、有志の方が作ったコンポーネントは割とネット上で落ちていることがあるので、（もちろん動作するかはさておきで）自作する前に探してみるのも一つの手です。
ちなみに、マルチセレクトに関しては以下のサイトで公開されていたりします。
さいごに
公式ドキュメントから引用した言葉ですが、MUIなどUIコンポーネントライブラリとは一線を画した存在ですし、拡張性・自由度を考えると今後の発展も期待したくなります。
個人的にはどんどん使っていきたいですし、今回はメリットや特徴の部分はあまり触れていませんがたくさんあるので実際に触ってみてください。