shadcn/ui 使ってみた
Koichi Hayakawanpx shadcn-ui@latest init
で、出てきた質問に回答すると、
Which style would you like to use?
❯ Default
New York
New Yorkってなんだろう
Koichi Hayakawa
The default style is the one you are used to. It's the one we've been using since the beginning of this project. It uses lucide-react for icons and tailwindcss-animate for animations.
The new-york style is a new style. It ships with smaller buttons, cards with shadows and a new set of icons from Radix Icons.
なるほど。アイコンで使われるライブラリとか微妙に違うみたい。
とりあえずdefaultで進めてみる。
Koichi Hayakawacomponents.json は、@shadcn/ui を使う上で必要な設定が記載されている。
Koichi Hayakawanpx shadcn-ui@latest add button
上記コマンドを実行すると、@/components/ui/ ディレクトリ配下にButtonコンポーネントが作られた。
使いたいコンポーネントがあれば、適宜コマンドを叩くことでひな形が生成されるよう。
コンポーネントに対して、手を入れたい場合はそのままtailwind css をいじれば好きなように変えられるのは、かゆいところに手が届きそうでよさそう。
Koichi Hayakawazod のスキーマから shadcn/ui のフォームコンポーネントを自動で生成する <AutoForm />というものがあるみたい。これも試してみるか。
Koichi Hayakawavercel が最近開発している生成AIで出力されるソースコードに、tailwindcss, shadcn/ui が使われていた。
ゆくゆくは、プロンプトから生成されたコードをコピペするだけで、大まかなUIが作れて、ロジックのつなぎ込みを修正するくらいになるのかな？すごすぎる。。
Koichi Hayakawaプロジェクトの指定ディレクトリにソースを落とすだけなので、
いつでも手を加えられるのが自由度高くていいと思った。
（コンポーネント自体の完成度も高いので、手を入れることはあんまりなさそうですが）
実務でも使ってみたい。