👻
shadcn/uiのスタイリングにはtweakcnが便利かもしれない
tweakcn は shadcn/ui のデザイントークンをWeb上のテーマエディタで調整できるツールです。現在は41種類のテーマプリセットが用意されており、それらをベースにデザインをカスタマイズできます
作成したデザイントークンはshadcnの形式のCSSとして出力できるので、簡単にアプリケーションに取り込めます。また、テーマの import / export もできるみたいなので継続的なメンテナンスも楽そうです
テーマエディタ
テーマエディタの画面はこんな感じです
Web上でカラー、フォント、影、角丸などをインタラクティブに調整できます
右上のCodeボタンをクリックするとCSSを出力してくれます
アプリケーションへ取り込み
アプリケーションに取り込む場合は出力したCSSを指定するだけで良いです。下の画像は実際にNext.jsのアプリケーションに取り込んだ例です
以上です。少し触った感じでは、デザインをサボってサクッとWebアプリケーションを作るときに非常に便利なツールだと思います
何かの参考になれば幸いです
Discussion