7onicDESIGN SYSTEM

CLI

v0.1.14

소스 파일을 프로젝트에 복사하여 컴포넌트를 추가합니다. 내부 로직과 구조까지 직접 수정할 수 있습니다.

초기화

7onic 토큰, 베이스 의존성, cn() 유틸리티 셋업

컴포넌트 추가

.tsx 소스 파일을 프로젝트에 복사

자동 의존성 해결

Radix UI와 내부 의존성을 자동 설치

TypeScript Required.tsx

TypeScript 프로젝트가 필요합니다 (tsconfig.json). CLI는 .tsx 파일만 출력합니다.

Quick Start

Tailwind 가 먼저 필요합니다 (아래 Tailwind 셋업 참조).

Terminal
npx 7onic init
npx 7onic add button card input

Tailwind 셋업

7onic CLI 는 Tailwind 자체를 설치하지 않습니다. 환경에 맞는 아래 명령을 실행한 뒤 7onic init 을 실행하세요.

Next.js + Tailwind v4
Terminal
npm install tailwindcss @tailwindcss/postcss postcss

상세 config (postcss / vite / tailwind.config) 가 필요한가요? Installation 페이지 참조

Vite + Tailwind v4
Terminal
npm install tailwindcss @tailwindcss/vite

상세 config (postcss / vite / tailwind.config) 가 필요한가요? Installation 페이지 참조

Next.js + Tailwind v3
Terminal
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

상세 config (postcss / vite / tailwind.config) 가 필요한가요? Installation 페이지 참조

Vite + Tailwind v3
Terminal
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

상세 config (postcss / vite / tailwind.config) 가 필요한가요? Installation 페이지 참조

npx 7onic init

7onic 자동 셋업 — 환경 감지, 의존성 설치, CSS · 유틸 · 설정 작성

Terminal
npx 7onic init

수행 내용

1

Framework(Next.js / Vite), TypeScript, Tailwind 자동 감지

2

Vite `@/` path alias 자동 설정

3

기본 의존성 설치 (`@7onic-ui/tokens` 등)

4

CSS 파일에 토큰 import 추가

5

Next.js / Vite boilerplate 정리 (`.bak` 백업)

6

`cn()` 유틸리티 및 `7onic.json` 생성

7onic init 이 하지 않는 것

Tailwind 자체 셋업은 사용자 영역 — 위 Tailwind 셋업 카드 참조

  • Tailwind 패키지 설치
  • Tailwind 설정 파일 생성 (`postcss.config`, `tailwind.config`)
  • Vite plugin 등록 (`vite.config.ts` 의 `tailwindcss()`)

npx 7onic add

컴포넌트 소스 파일을 프로젝트에 복사합니다. 의존성은 자동으로 해결됩니다.

Terminal
npx 7onic add button
npx 7onic add button card input modal
npx 7onic add --all
Tailwind v4

Tailwind v4 프로젝트 (Next.js / Vite) 에서 CLI 로 컴포넌트 추가 시 @source 지시어가 CSS 파일에 자동 주입됩니다. 별도 설정 불필요

Optional추가 셋업이 필요한 컴포넌트
toast

루트 레이아웃에 Toaster를 추가하세요

// app/layout.tsx (Next.js)
<body>
  {children}
  <Toaster />
</body>
// src/main.tsx (Vite)
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
    <Toaster />
  </StrictMode>
)
tooltip

앱을 TooltipProvider로 감싸세요

// app/layout.tsx (Next.js)
<body>
  <TooltipProvider>
    {children}
  </TooltipProvider>
</body>
// src/main.tsx (Vite)
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <TooltipProvider>
      <App />
    </TooltipProvider>
  </StrictMode>
)

7onic.json

init으로 생성됩니다. 컴포넌트 배치 위치와 Tailwind 설정을 제어합니다.

{
  "$schema": "https://7onic.design/schema/7onic.json",
  "tailwind": {
    "version": 4,
    "css": "app/globals.css"
  },
  "aliases": {
    "components": "@/components/ui",
    "utils": "@/lib/utils"
  }
}
tailwind.version
3 | 4

Tailwind CSS 버전 (3 또는 4)

tailwind.config
tailwind.config.js

Tailwind v3 설정 파일 경로 (v4에서는 불필요)

tailwind.css
Next.js: app/globals.css Vite: src/index.css

토큰 import용 메인 CSS 파일

aliases.components
@/components/ui

컴포넌트가 복사되는 위치

aliases.utils
@/lib/utils

cn() 유틸리티 위치

Available Components

npx 7onic add --all로 모든 컴포넌트를 한꺼번에 추가할 수 있습니다.

차트 별칭: bar-chart, line-chart, area-chart, pie-chart는 모두 chart로 해석됩니다.

Dependency Resolution

컴포넌트가 다른 컴포넌트에 의존하면 둘 다 자동으로 복사됩니다.

add button
button+button-group
add button-group
button-group+button
add icon-button
icon-button+button+button-group
add input
input+field
add chart
chart(bar / line / area / pie)
add pie-chart
chart(alias)
add card
card

Flags

--tailwind v3|v4init의 Tailwind 버전 지정 (기본: 자동 감지)
--all모든 컴포넌트 추가 (recharts 옵트아웃 프롬프트)
--yes, -y확인 프롬프트 건너뛰기 (기본값 사용)
--overwrite기존 파일 덮어쓰기

npm vs CLI

npm
npm install @7onic-ui/react @7onic-ui/tokens
  • ✓ 셋업 없이 바로 import해서 사용
  • ✓ npm으로 자동 업데이트
  • ✓ 컴포넌트를 그대로 사용할 때 최적
CLI
npx 7onic add button
  • ✓ 소스 코드를 완전히 소유
  • ✓ 내부 로직, Props, 구조를 자유롭게 변경
  • ✓ 컴포넌트 동작 자체를 변경해야 할 때 최적