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を子要素で上書きする。