ShadCN UI 학습기: 설치

ShadCN 설치 및 설정 방법

• ShadCN이란?
  ShadCN은 Tailwind CSS 기반의 UI 컴포넌트 라이브러리로, 다양한 UI 요소를 손쉽게 활용할 수 있도록 도와줍니다.

ShadCN 설치 방법

ShadCN을 설치하려면 공식 문서를 참고하여 진행하면 됩니다.
정말 간단!!!
Nextjs에서의 shadcn 설치 가이드

✅ 설정 파일 자동 생성
설치가 완료되면, 프로젝트 루트 디렉토리에 다음 파일들이 자동으로 생성됩니다.

• components/ui/ → ShadCN UI 컴포넌트 폴더
• tailwind.config.js → Tailwind 설정 파일
• globals.css → 기본 스타일 파일
  등등

🔧 개별 컴포넌트 설치
ShadCN은 필요한 컴포넌트만 선택적으로 설치할 수 있습니다.

npx shadcn-ui@latest add button

npx shadcn-ui@latest add accordion

npx shadcn-ui@latest add dialog

npx shadcn-ui@latest add input

같은 방식으로 다른 컴포넌트들도 추가할 수 있습니다.

🎨 ShadCN 활용하기
설치한 컴포넌트는 @/components/ui/ 경로에서 불러와 사용할 수 있습니다.

import { Button } from "@/components/ui/button";
export default function Home() {
  return <Button>Click me</Button>;
}

ShadCN의 장점! - 컴포넌트 커스텀 가능

ShadCN은 설치한 컴포넌트가 라이브러리 내부에서 관리되지 않고
프로젝트 내에서 직접 수정할 수 있도록 제공됩니다.
@/components/ui/ 폴더 내에서 자유롭게 스타일과 기능을 커스텀할 수 있습니다.