[React] VisualStudio React 프로젝트에 Sahdcn-UI 추가

VisualStudio 2026에서 생성한 React 프로젝트에 Shadcn-UI를 추가하는 방법에 대해 정리합니다.

TailwindCSS 설치

Tailwindcss 홈페이지에서 설치 가이드에 따라 설치합니다. VisualStudio에서 생성한 React 프로젝트는 Vite를 사용합니다. 따라서 설치가이드에서 Vite를 사용하는 부분을 찾아 진행해야 합니다.

1. tailwindcss와 @tailwincss/vite 설치
   npm install tailwindcss @tailwindcss/vite
2. vite.config.ts 파일 열고 Tailwindcss 설정 추가

   import tailwindcss from '@tailwindcss/vite';
   
   export default defineConfig({
     ...
     plugins: [
       ...
       tailwindcss(),
     ],
   })

3. 프로젝트의 src폴더에 main.css (main.css 파일이 없다면 index.css)파일에 @import 추가
   @import "tailwindcss";
4. Tailwind CSS 테스트 코드 작성 및 테스트

   <h1 class="text-3xl font-bold underline">
     Hello world!
   </h1>

Shadcn-UI 설치

이미 프로젝트는 생성되어 있으므로 Shadcn-UI의 Installation/Existing Project를 참고하여 설치를 진행합니다다.

1. 1번 Create Project와 2번 Add Tailwind CSS는 이미 진행했으므로 생략합니다.
2. tsconfig.json 파일을 열고 아래와 같은 compilerOptions에 bakseUrl과 paths를 추가합니다.

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

3. tsconfig.app.json 파일을 열고 아래와 같은 compilerOptions에 bakseUrl과 paths를 추가합니다.

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

4. package.json 파일을 열고 @types/node가 설치되어 있는지 확인합니다. 설치되어 있지 않으면, 아래와 같이 설치합니다.
   npm install -D @types/node
5. vite.config.ts를 열고 resolve/alias에 '@'가 src 폴더로 설정되어 있는지 확인합니다. 설정되어 있지 않으면, 아래와 같이 설정합니다.

   import path from "path"
    
   export default defineConfig({
     ...
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),
       },
     },
   })

6. shadcn init 명령어를 통해 초기화를 진행합니다. 아래와 같은 명령을 실행하세요. 아래 명령어가 실행되면 ~/src/componnents 폴더와 ~/src/lib/utils.ts 파일이 생성됩니다.
   npx shadcn@latest init
7. 이제 Shadcn-UI 컴포넌트를 추가하고 테스트를 해보세요. 아래 명령어를 추가하면 Button Component가 ~/src/components폴더에 추가됩니다.
   npx shadcn@latest add button
8. 소스코드에 Button을 추가해서 테스트해봅니다.

   import { Button } from "@/components/ui/button"
    
   ...
   return (
       <div className="flex min-h-svh flex-col items-center justify-center">
         <Button>Click me</Button>
       </div>
     )