● shadcnのインストール

npx shadcn-ui@latest init

● shadcnのコンポーネントの中から使いたいコンポーネントをそれぞれインストールする

例えばボタンをインストールする場合は次のコマンドを実行します

npx shadcn-ui@latest add button

shadcnはnpmパッケージとして提供されてません。 つまり依存関係としてインストールする必要はありません。 直接指定したディレクトリにインストールされるという形になります

● パスを追加する

・1. tsconfig に以下を追加します

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

・2. Vite で react を使用している場合は次のようにします

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // '@' は 'src' フォルダを指すように設定
    },
  },
  plugins: [react()],
});

● Button コンポーネントを使用する

以下のように呼び出して使用します

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

function App() {
  return (
    <div>
      <Button>test</Button>
    </div>
  );
}

export default App;

● shadcnのインストールディレクトリを変更する

以下のように変更してからインストールコマンドを実行すると新しい場所にインストールされます。 （古いコンポーネントを手動で削除します。）

components.json

  "aliases": {
    "components": "@/components/shadcn",
    "utils": "@/components/shadcn/lib/utils"
  }

● Storybook で Button コンポーネントをカスタマイズして使用する

・ 1. .storybook/preview.ts に css を適用する

import '../src/index.css'; // Tailwind CSS のスタイルシートへのパス