🚀

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

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

概要

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

環境

  • Next.js：v15.2.4（App Router）
  • Bun：v1.2.8

shadcn/ui とは

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

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

インストール

初期化する（公式のInstallation）

bunx --bun shadcn@latest init

初期化が完了すると、components.json が作成される
使いやすいように"aliases"内のパスを少し変更しました

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/shadcn/components",
    "utils": "@/shadcn/lib/utils",
    "ui": "@/shadcn/components/ui",
    "lib": "@/shadcn/lib",
    "hooks": "@/shadcn/hooks"
  },
  "iconLibrary": "lucide"
}

コンポーネントの追加

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

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

bunx --bun shadcn@latest add button

Discussion