Getting Started
Installation
Groudit UI 는 Base UI 위에 Tailwind CSS + 디자인 토큰(색·밀도·둥글기)으로 스타일링한 컴포넌트를, npm 패키지 대신 소스 그대로 프로젝트에 복사하는 방식입니다. 한 번 설정하면 어떤 컴포넌트도 같은 흐름으로 추가할 수 있습니다.
1
의존성 추가
pnpm add class-variance-authority clsx tailwind-merge @base-ui/react2
cn 유틸리티
src/lib/utils.ts 에 다음 헬퍼를 추가합니다.
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}3
컴포넌트 설치
각 컴포넌트 페이지의 Installation 섹션에 있는 CLI 명령을 실행하거나, Manual 탭에서 코드를 직접 복사해 src/components/ui/ 아래에 붙여넣으세요.
pnpm dlx @groudit/cli@latest add button4
사용
import { Button } from "@/components/ui/button";
export default function Page() {
return <Button>Click me</Button>;
}