7onicDESIGN SYSTEM

CLI

v0.1.3

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

초기화

토큰, Tailwind, cn() 유틸리티 셋업

컴포넌트 추가

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

자동 의존성 해결

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

TypeScript Required.tsx

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

Quick Start

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

npx 7onic init

프로젝트에서 7onic을 초기화합니다. Tailwind 버전을 감지하고, 기본 의존성을 설치하고, 설정을 생성합니다.

Terminal
npx 7onic init

수행 내용

1

Tailwind 버전 감지 (tailwind.config.* 있으면 → v3, CSS 설정만 → v4)

2

패키지 매니저 감지 (npm / pnpm / yarn / bun)

3

기본 의존성 설치 (@7onic-ui/tokens, clsx, tailwind-merge, cva)

4

CSS 파일에 토큰 import 추가

5

cn() 유틸리티 함수 생성

6

7onic.json 설정 파일 생성

npx 7onic add

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

Terminal
npx 7onic add button
npx 7onic add button card input modal
npx 7onic add --all
Optional추가 셋업이 필요한 컴포넌트
toast

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

// app/layout.tsx
<body>
  {children}
  <Toaster />
</body>
tooltip

앱을 Tooltip.Provider로 감싸세요

// app/layout.tsx
<Tooltip.Provider>
  {children}
</Tooltip.Provider>

7onic.json

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

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

Tailwind CSS 버전 (3 또는 4)

tailwind.config
tailwind.config.ts

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

tailwind.css
src/app/globals.css

토큰 import용 메인 CSS 파일

aliases.components
@/components/ui

컴포넌트가 복사되는 위치

aliases.utils
@/lib/utils

cn() 유틸리티 위치

Available Components

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

accordionalertavatarbadgebreadcrumbbuttonbutton-groupcardchartcheckboxdividerdrawerdropdownicon-buttoninputmetric-cardmodalnavigation-menupaginationpopoverprogressradio-groupsegmentedselectskeletonsliderspinnerswitchtabletabstextareatoasttoggletoggle-grouptooltip

차트 별칭: 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
  • ✓ 셋업 없이 바로 import해서 사용
  • ✓ npm으로 자동 업데이트
  • ✓ 컴포넌트를 그대로 사용할 때 최적
CLI
npx 7onic add button
  • ✓ 소스 코드를 완전히 소유
  • ✓ 내부 로직, Props, 구조를 자유롭게 변경
  • ✓ 컴포넌트 동작 자체를 변경해야 할 때 최적