shadcn/uiを使ってみる

shadcn/uiは、Tailwind CSSとRadix UIを組み合わせた、柔軟でカスタマイズ性の高いUIコンポーネント集です。
コンポーネントライブラリのように一式をインストールして使用するような形式ではなく、必要なコンポーネントだけをプロジェクトに導入して使用するという点が特徴です。
今回はshadcn/uiの導入から使い方までを簡単に試してみます。

Tailwind CSSの導入

ReactをViteでインストール後、Tailwind CSSを導入します。

npm install tailwindcss @tailwindcss/vite

vite.config.tsに下記を追記します。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

サイト全体で使用するCSS(今回の場合src/index.css)に下記を追加します。

@import "tailwindcss";

これでTailwind CSSを使用する準備ができました。

shadcn/uiの導入

次にtsconfig.jsonに下記を追記します。

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.jsonに下記を追記します。

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "types": ["vite/client"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": ["src"]
}

@types/node のパッケージをインストールします。

npm install @types/node --save-dev

vite.config.tsに下記を追記します。

import path from "path"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

これでshadcn/uiを使う準備ができたので、セットアップを行います。

npx shadcn@latest init

ベースカラーをどうするか質問されますが、今回はNeutralを選択しました。

? Which color would you like to use as the base color? » - Use arrow-keys. Return to submit.
>   Neutral
    Gray
    Zinc
    Stone
    Slate

これでcomponents.jsonが生成され、セットアップが完了しました。

shadcn/uiの使い方

実際にshadcn/uiを使ってみます。
例として、プロジェクトにButtonのコンポーネントを追加してみます。

npx shadcn@latest add button

src/App.tsx にButtonを追加してみます。

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

function App() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}

export default App

これでButtonのコンポーネントが使用できました。
Buttonコンポーネントのデモページ

ボタンのバリアントなども用意されているので、公式のドキュメントをを参考にいくつか試してみます。

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

function App() {
  return (
    <div className="flex min-h-svh flex-col items-center gap-2 justify-center">
      <div className="flex flex-wrap items-center gap-2 justify-center">
        <Button
          size="sm"
        >default-sm</Button>
        <Button>default</Button>
        <Button
          size="lg"
        >outline-lg</Button>
      </div>
      <div className="flex flex-wrap items-center gap-2 justify-center">
        ～
        <Button
          variant="outline"
        >outline</Button>
        ～
        <Button
          variant="secondary"
        >secondary</Button>
        ～
        <Button
          variant="ghost"
        >ghost</Button>
        ～
        <Button
          variant="destructive"
        >destructive</Button>
        ～
        <Button
          variant="link"
        >link</Button>
        ～
      </div>
    </div>
  )
}

export default App

Buttonコンポーネントのデモページ2

他にもいろいろなコンポーネントが用意されているので、詳しくは公式のドキュメントを参照ください。