shadcn/ui

Viteで試してみる。

npm create vite@latest -- --template react-ts

Tailwind CSSをインストール。

npm install tailwindcss @tailwindcss/vite

• tailwindcss → Tailwind CSS 本体
• @tailwindcss/vite → Tailwind CSS のViteプラグイン

index.css の中身を全て削除して Tailwind CSS をインポート。

@import "tailwindcss";

tsconfig.json に compilerOptions を追加。

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

tsconfig.app.json の compilerOptions にも baseUrl と paths を追加。

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

vite.config.ts に Tailwind CSSのプラグイン読み込みと名前解決についての記述を追加。

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

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

App.tsx をまっさらな状態に変更

import './App.css'

function App() {
  return (
    <div>Hello</div>
  )
}

export default App

不要なデータを削除

• publis/vite.svg
• src/assets/react.svg
• src/App.css の中身（ファイルは残す）

これでようやく準備完了。

shadcn/uiをセットアップ

npx shadcn@latest init

• package.json の dependencies に以下が追加される。
  • class-variance-authority
  • clsx
  • lucide-react
  • tailwind-merge
• package.json の devDependencies に以下が追加される。
  • tw-animate-css
• index.css に記述が追加される。
• lib/utils.ts が生成される。
• components.ts が生成される。

コンポーネントのインストール

Button コンポーネントを追加してみる。

npx shadcn@latest add button

• package.json の dependencies に以下が追加される。
  • @radix-ui/react-slot
• components/ui/button.tsx が生成される。

App.tsx に Button を設置する。

import './App.css'
import { Button } from './components/ui/button'

function App() {
  const sayHello: React.MouseEventHandler<HTMLButtonElement> = () => {
    console.log('hello');
  }
  
  return (
    <div>
      <Button onClick={sayHello}>Click me</Button>
    </div>
  )
}

export default App

ブラウザで確認するとボタンが設置されている。クリックすると開発者ツールのコンソールに hello と表示される。

package.json に追加される依存関係

• class-variance-authority
  • コンポーネントに複数のバリアントを用意して内部的にCSSクラスを調整する際に便利なライブラリ。TailwindCSSと使われることが多い？
    • ここでいうバリアントはTailwaind CSSのバリアントとは異なる（はず）なので注意。
  • shadcn/uiの Button コンポーネントには default 、 destructive 、 outline 、 secondary 、 ghost 、 link の6つのバリアントがあり variant プロパティで指定できる。コンポーネント内ではあらかじめ各バリアントのクラス名を宣言しておき、コンポーネントに与えられたバリアントに応じて適切なクラス名のリストを導出する、という感じっぽい。
• clsx
  • クラス名リスト（半角スペース区切りの文字列）を生成するのに便利なライブラリ。
• lucide-react
  • アイコンライブラリ。
• tailwind-merge
  • Tailwind CSS用のクラス文字列をいい感じにマージしてくれるライブラリ。
• tw-animate-css
  • Tailwind CSS用のアニメーションライブラリ。
• @radix-ui/react-slot
  • Radix UIの中のSlotライブラリ。
  • コンポーネント内のタグの要素を変えるのに便利なライブラリ？
    • Buttonコンポーネントだけど <button> ではなく <a> を使用したい時とか。