これからのuiはこれかも？shadcn/uiを使ってみる

はじめに

開発でMaterial-UIを使っていて、デザインの細かい要望で強引なカスタマイズをしてしまうことがありました。
shadcn/uiはカスタマイズが容易なので、紹介も兼ねて試してみます。
shadcnさんが作ったらしいです。

とりあえず、ボタンコンポーネントを使ってみる

shadcn/uiではこのようにコンポーネントをインストールします。
必要に応じてコンポーネントをインストールしてくるので、全体のファイル量が軽量であるのもshadcn/uiの特徴です。

npx shadcn@latest add button

コマンド実行後、components/uiにbutton.tsxというファイルが作成されるので、propsの値で思い通りのデザインにならないのであればファイルの直接編集でカスタマイズできます。
（とはいえtailwindで指定したら大体のデザインはなんとかなりそう）

<Button className="rounded-2xl">
          <Bomb />
            ボタン
</Button>

tailwindをがっつり使っているので、好きな人は相性が良さそうです。
MUIと違って中身のコードが見えるので、インストールで取ってくるとはいえコードの中身を理解しないといけないような気持ちになりますね。

他にも

バリデーション

useFormとzodを使ってバリデーションを設定できます。
ぽちぽちだけで実装できて簡単すぎました。

https://ui.shadcn.com/docs/components/form

ダークモード

https://ui.shadcn.com/docs/dark-mode/next

できるデザイン

公式のexampleを見ると、どんなデザインができるかがみれます。
カスタマイズ性が評価されていますが、シンプルにデフォルトのデザインが今っぽくていいと思いました。