shadcn/ui 초기세팅 및 적용

공식문서 참고 shadcn/ui-next.js로 설치하기

pnpm dlx shadcn@latest init
로 설치해준다. (pnpm 을 사용해 설치해주었다.)

✔ The path /Users/jeongeun/code/moon does not contain a package.json file.
Would you like to start a new project? › Next.js
✔ What is your project named? … shadcn-next
✔ Creating a new Next.js project.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Slate
? Would you like to use CSS variables for theming? › yes

• next.js 로 셋팅 선택
• style 선택: New York 선택.(New York이 input, button 등의 컴포넌트들의 높이가 낮았다. 조금 더 내스타일..) Default vs New York 비교 글
• base color 선택: 색상보고 원하는 기본 색상 선택.스타일 색상 보기
• CSS variables를 사용할지 말지는, 아래의 정보를 가지고 결정했다. 다크/라이트 모드를 지원할 계획이 있어서, Yes 선택.

선택지	장점	단점	추천 상황
Yes (CSS Variables 사용)	유연한 테마 변경, 다크 모드 적용이 깔끔함	Tailwind에서 직접 색상 사용이 번거로움	다크 모드를 확장성 있게 관리하고 싶다면
No (Tailwind 클래스로 직접 관리)	Tailwind 스타일 그대로 사용 가능, 간편함	테마 변경이 CSS 변수만큼 유연하지 않음	Tailwind 스타일을 그대로 쓰고 싶다면

shadcn/ui의 컴포넌트 사용은
pnpm dlx shadcn@latest add button
이렇게 사용하고싶은 컴포넌트를 골라서 설치 후 사용할 수 있다.

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}