概要

• 公式：https://ui.shadcn.com/
• shadcn/uiはコンポーネント・ライブラリではなく、再利用可能なコンポーネントのコレクション
• コンポーネント・ライブラリではないとは、依存関係としてインストールしないという意味
• 必要なコンポーネントだけを選んでインストールする
• コードをコピーしてプロジェクトに貼り付け、必要に応じてカスタマイズする

インストール

• Next.jsのプロジェクトを利用する場合をみていく
• https://ui.shadcn.com/docs/installation/next
• initコマンドを実行して、新しいNext.jsプロジェクトを作成するか、既存のプロジェクトをセットアップする
• npx shadcn@latest init
• components.jsonを設定する質問に答えていく

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes

• これでプロジェクトにコンポーネントを追加し始めることができる
• npx shadcn@latest add button

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}