shadcn/ui란 컴포넌트 라이브러리가 아닌 Radix UI 및 Tailwind CSS를 사용하여 이미 구축된 컴포넌트를, 직접 복사해서 프로젝트에 붙여주는 도구이다.

즉, 라이브러리가 아닌 일종의 코드생성기 이다.

RadixUI 란?
고품질의 접근성 높은 디자인 시스템과 웹 앱을 구축하기 위한 오픈 소스 UI 컴포넌트 라이브러리이다.
https://www.radix-ui.com/primitives/docs/overview/introduction

npx shadcn-ui@latest init

위 명령어로 프로젝트에 설정파일 (shadcn-ui.json)을 추가하고 기본 설정을 셋업하면

 npx shadcn-ui@latest add button

위 같은 명령어로, components/ui/button.tsx 파일을 생성하여, 프로젝트에 곧바로 사용할 수 있게된다.

기존의 npm install 계열의 명령어와 달리 패키지를 설치하는 방식이 아니라, 코드는 현재 프로젝트에 생성하는 방식이므로, 빠르게 사용할 수 있으며, 사용자가 원하는대로 편집하기 간편하다는 장점이 있다.

특히, 생성된 컴포넌트는 모두 TailwindCSS 기반이며, clsx, class-variance-authority(cva)를 활용하여 스타일 분기/확장이 쉽게 설계되어 있다.
즉, 스타일링이 매우 유연하다!

Prerequisite

https://ui.shadcn.com/docs/installation/manual

공식 홈페이지에서는 아래 명령어로 초기 설정할것을 안내한다.

npx shadcn@latest init

하지만 이는, Next.js 환경에서만 사용할 수 있는 초기화 명령이다.

필자는 RCA로 프로젝트를 생성했으며, 그렇기 때문에 아래와 같은 경고문이 출력되었다.

✔ Preflight checks.
✖ Verifying framework.

We could not detect a supported framework at C:\Users\UserName\watcha-pedia-clone\frontend.
Visit https://ui.shadcn.com/docs/installation/manual to manually configure your project.
Once configured, you can use the cli to add components.

그렇기 때문에 아래와 같은 수동 설정 과정을 거쳤다.

설정

1) components.json 수동 생성

원래는 shadcn-ui.json을 설정파일로 사용하지만, 어째선지 계속 구버전 파일인 components.json을 요구한다. 일단 파일이름을 components.json으로 해야

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

2) 필수 의존성 설치

 npm install class-variance-authority clsx tailwind-variants

그리고, 필요한 패키지들의 의존성도 설치한다.

npm install @radix-ui/react-popover react-day-picker date-fns

3) 컴포넌트 수동 추가

npx shadcn@latest add calendar
npx shadcn@latest add popover

단점

Next.js가 아닌 환경에서 shadcn/ui를 쓰게 될 경우,

결국 컴포넌트의 소스코드를 복사해 오기 위한 전제조건이 굉장히 많아진다는 점이다.

초기화 절차, 컴포넌트 복사등의 작업이 단순한 npm install 한 줄로 모든 것이 끝나는 구조가 아니기 때문에, shadcn/ui는 Next.js 외 환경에선 다소 억지로 우겨넣는 느낌이 강하다

이런 방식은 지금처럼 학습용 프로젝트를 수행하기 위해 시범용으로 도입할것이며, 현업에서는 Next.js 환경에서 메뉴얼에 맞추어 작업해야겠다.

참고

https://ui.shadcn.com/
https://www.radix-ui.com/primitives/docs/overview/introduction
https://velog.io/@ckstn0777/shadcnui-%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B3%B5%EC%9C%A0-UI-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%82%AC%EC%9A%A9-%EA%B2%BD%ED%97%98