Zenn
🚀

Next.js に shadcn/ui を導入する

2023/12/23に公開
Next.js
React
TypeScript
shadcn/ui
tech

概要

Next.js に shadcn/ui を導入した備忘録

環境

  • Next.js：v14.0.3（App Router）
  • shadcn/ui：v0.1.0
  • Bun：v1.0.15

shadcn/ui とは

Radix UI と Tailwind CSS をベースに作成された、コンポーネントのカタログを提供している
パッケージとしてインストールするのではなく、作成されたコンポーネントのソースコードをコピーしてくる感じ

CSS in JS っぽいことができつつ、ライブラリ側で use client が強制されることもなく、React Server Component との相性が良さそうなので使ってみました
https://ui.shadcn.com/

インストール

shadcn-ui の CLI を追加する
（追加せず bunx で実行することもできる（公式のInstallation））

bun add -D shadcn-ui

初期化

bun shadcn-ui init

初期化が完了すると、components.json が作成される
コマンド実行時に諸々回答した結果が反映されているので、このまま使う

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/app/_component/",
    "utils": "@/app/_lib/ui/utils"
  }
}

コンポーネントの追加

必要なコンポーネントは逐一 shadcn/ui からインストールする必要がある
もしくはコピペで持ってくる

例えばボタンを使いたい時（button）

bun shadcn-ui add button

Discussion