Installation

HANUI는 shadcn/ui처럼 소스 코드를 복사하는 방식입니다. CLI로 초기 설정하고, 필요한 컴포넌트만 가져가세요.

AI로 설치하기

Cursor, Claude, ChatGPT 등 AI에게 아래 프롬프트를 붙여넣으세요.

패키지

@hanui/cli (React)

Next.js, Vite + React 등 React 기반 프로젝트용

요구사항

React

18.0.0 이상

Node.js

18.0.0 이상

Tailwind CSS

v4.x (권장) 또는 v3.x

단계별 설치

Step 1. CLI 설치

프로젝트에 CLI를 devDependency로 설치합니다:

Step 2. 프로젝트 초기화

CLI를 실행하면 KRDS 디자인 토큰이 자동으로 설정됩니다:

Step 3. 컴포넌트 추가

필요한 컴포넌트를 추가합니다:

Step 4. 사용하기

init이 생성하는 파일

variables.css

KRDS 디자인 시스템의 CSS 변수가 정의되어 있습니다:

globals.css

기존 globals.css에 CSS 변수 import가 추가됩니다:

프레임워크별 파일 경로

프레임워크컴포넌트 경로CSS 경로
Next.js (App Router + src)src/components/hanui/src/app/globals.css
Next.js (App Router)components/hanui/app/globals.css
Vite + Reactsrc/components/hanui/src/index.css

브랜드 색상 커스터마이징

조직의 브랜드 색상을 적용하려면 CSS 변수를 오버라이드하세요:

문제 해결

KRDS 색상 클래스가 적용되지 않음

  • npx hanui init을 실행했는지 확인
  • v3: tailwind.config.ts에 hanUIPreset이 추가되어 있는지 확인
  • 개발 서버를 재시작

컴포넌트 import 에러

@/components/hanui 경로를 인식하지 못하는 경우:

다크 모드가 작동하지 않음