React
shadcn CLI 로 브랜드 테마와 컴포넌트를 내 React 프로젝트에 설치하고, 토큰 유틸로 스타일을 입히는 방법을 알아봐요.
개요
Rebar 는 npm 패키지로 컴포넌트를 배포하지 않아요. 대신 shadcn/ui 와 같은 registry 방식으로 컴포넌트 소스 코드를 내 프로젝트에 복사해 줘요. 복사된 코드는 내 코드이므로 자유롭게 고칠 수 있어요.
| 구성 | 내용 |
|---|---|
| 브랜드 테마 | <brand>-theme registry 아이템. CSS 변수(--rb-*), Tailwind v4 테마 매핑, shadcn 별칭(--primary …)을 한 번에 넣어요. |
| 컴포넌트 | registry/ui/* 원본. radix-ui 프리미티브 + class-variance-authority + Tailwind 토큰 유틸로 만들었어요. |
| 유틸 | cn() (clsx + tailwind-merge). 컴포넌트를 설치하면 함께 설치돼요. |
요구 사항
- React 19
- Tailwind CSS v4
- shadcn CLI 로 초기화한 프로젝트 (
components.json)
Vite, React Router, Next.js 등 shadcn 이 지원하는 환경이면 어디서든 쓸 수 있어요.