shadcn入門

This is not a component library. It is how you build your component library.

らしい。component libraryではなく、component libraryを構築するために用いるツールなのかな。


https://ui.shadcn.com/docs/cli

pnpm dlx shadcn@latest init

を実行するとglobal.cssとtailwind.config.tsが変更される。

components.jsonやlib/utils.tsなんかも追加されていた。開発していくうちになにがshadcn由来なのか分かりづらくなる気がするけどこういうものなのかもしれない。


pnpm dlx shadcn@latest add button
✔ Checking registry.
✔ Installing dependencies.
✔ Created 1 file:
- src/components/ui/button.tsx

おお。このコマンドを走らせるだけでButtonのコンポーネント自体は生成されているっぽい。

何かしらのcomponentを追加していくとcomponents/ui以下にtsファイルが追加されていくっぽい。


公式のcomponentsリストを眺めて、全体的にshadcnでリプレイスしていくのが良さそうなので進行する。


https://ui.shadcn.com/

全体的なデザインはこっちを見る。ありがちなsidebar構成とかもそのまま載っていて助かる。


https://tech-lab.sios.jp/archives/46401#aschild

shadcnのasChildの理解はこちらを参考にさせてもらった。デフォルトでレンダリングされるDOMを子要素で上書きする。

Related Articles