설치

shadcn/ui 프로젝트를 설정하는 방법을 안내하는 문서예요. 프레임워크를 선택해 들어가면 각각의 설치 과정을 볼 수 있어요. TypeScript를 기본으로 하지만, 필요하다면 JavaScript 버전으로도 구성할 수 있어요.

출처: 문서

본문

프레임워크

원하는 프레임워크 카드를 눌러 설치 방법을 확인해 보세요.

Next.js

Vite

Remix

Astro

Laravel

Gatsby

Manual

TypeScript

이 프로젝트와 컴포넌트들은 TypeScript로 작성되어 있어요. 여러분의 프로젝트도 TypeScript를 사용하는 걸 권장해요.

하지만 JavaScript 버전의 컴포넌트도 제공하고 있어요. JavaScript 버전은 cli를 통해 사용할 수 있어요.

TypeScript를 사용하지 않으려면 components.json 파일에서 tsx 플래그를 사용하면 돼요.

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "rsc": false,
  "tsx": false,
  "aliases": {
    "utils": "~/lib/utils",
    "components": "~/components"
  }
}

임포트 별칭을 구성하려면 아래와 같은 jsconfig.json을 사용할 수 있어요.

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

더 알아보기

iframe과 수동 설정이 궁금하다면 설치 문서의 하위 페이지들을 참고해요.
다크 모드 설정은 다크 모드 문서를 확인해요.