Installation

npm 패키지로 설치하면 props와 토큰으로 자유롭게 수정할 수 있고, npm update로 최신 버전도 바로 받을 수 있습니다.

Install

@7onic-ui/reactv0.3.6

Terminal

# npm
npm install @7onic-ui/react @7onic-ui/tokens

# yarn
yarn add @7onic-ui/react @7onic-ui/tokens

# pnpm
pnpm add @7onic-ui/react @7onic-ui/tokens

Tailwind 필수: Tailwind v3 또는 v4가 필요합니다. 아래 Setup 섹션에서 자기 환경을 선택하세요.

Setup

아래 순서대로 환경에 맞게 셋업하세요.

Tailwind 이미 셋업한 경우, Edit CSS step 만 (v3 는 tailwind.config 에 presets / content paths 도 추가)

Vite + Tailwind v4

Step 1. Tailwind 패키지 설치

Terminal

npm install tailwindcss @tailwindcss/vite

Step 2. 기존 vite.config.ts 에 import 1줄과 plugins 항목 1개씩 추가하세요. (파일 전체 덮어쓰기 X)

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' // ← add this line

export default defineConfig({
  plugins: [react(), tailwindcss()], // ← add tailwindcss()
})

Step 3. Vite 기본 스타일(데모용)은 UI 라이브러리와 충돌할 수 있습니다. 커스텀이 없다면 아래 예시 블록을 정리하세요.

src/index.css— 삭제할 블록 보기

src/index.css

:root {
  font: 18px/145% system-ui, sans-serif;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark color tokens */
  }
}

#root {
  width: 1126px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body {
  margin: 0;
}

h1, h2 {
  font-family: system-ui, sans-serif;
  font-weight: 500;
  color: var(--text-h);
}

/* + h1, h2 (size), p, code etc. — delete every other element/universal rule */

Step 4. 아래 import 를 CSS 파일에 추가

src/index.css

@import "tailwindcss";
@import '@7onic-ui/tokens/tailwind/v4.css';

@source "../node_modules/@7onic-ui/react/dist";

개별 임포트

@import "tailwindcss";
@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';
@import '@7onic-ui/tokens/tailwind/v4-theme.css';

@source "../node_modules/@7onic-ui/react/dist";

Next.js + Tailwind v4

Step 1. Tailwind 패키지 설치

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Step 2. package.json이 있는 폴더에 postcss.config.mjs 새 파일을 만들고 아래 코드를 붙여넣기

postcss.config.mjs

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

Step 3. 아래 import 를 CSS 파일에 추가

app/globals.css

@import "tailwindcss";
@import '@7onic-ui/tokens/tailwind/v4.css';

@source "../node_modules/@7onic-ui/react/dist";

개별 임포트

@import "tailwindcss";
@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';
@import '@7onic-ui/tokens/tailwind/v4-theme.css';

@source "../node_modules/@7onic-ui/react/dist";

Tips. 기존 스타일이 덮어씌워지거나 렌더링이 깨지면, 충돌하는 element/universal rule 을 `@layer base { ... }` 로 감싸세요.

app/globals.css— 예시 보기

app/globals.css

@layer base {
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
}

Vite + Tailwind v3

Step 1. Tailwind v3 와 관련 패키지 설치 후, init -p 로 설정 파일을 자동 생성

Terminal

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

Step 2. tailwind.config.js 에 7onic preset 과 content paths 를 추가하세요.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    require('@7onic-ui/tokens/tailwind/v3-preset'),
  ],
  content: [
    './node_modules/@7onic-ui/react/dist/**/*.{js,mjs}',
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
}

Step 3. Vite 기본 스타일(데모용)은 UI 라이브러리와 충돌할 수 있습니다. 커스텀이 없다면 아래 예시 블록을 정리하세요.

src/index.css— 삭제할 블록 보기

src/index.css

:root {
  font: 18px/145% system-ui, sans-serif;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark color tokens */
  }
}

#root {
  width: 1126px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body {
  margin: 0;
}

h1, h2 {
  font-family: system-ui, sans-serif;
  font-weight: 500;
  color: var(--text-h);
}

/* + h1, h2 (size), p, code etc. — delete every other element/universal rule */

Step 4. 아래 import 를 CSS 파일에 추가

src/index.css

@import '@7onic-ui/tokens/css/all.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

개별 임포트

@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Next.js + Tailwind v3

Step 1. Tailwind v3 와 관련 패키지 설치 후, init -p 로 설정 파일을 자동 생성

Terminal

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

Step 2. tailwind.config.js 에 7onic preset 과 content paths 를 추가하세요.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@7onic-ui/tokens/tailwind/v3-preset'),
  ],
  content: [
    './node_modules/@7onic-ui/react/dist/**/*.{js,mjs}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
}

Step 3. 아래 import 를 CSS 파일에 추가

app/globals.css

@import '@7onic-ui/tokens/css/all.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

개별 임포트

@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

공식 문서: tailwindcss.com

Fonts

Fonts Setup Guide

폰트 설치 및 다국어 설정

컴포넌트는 토큰의 font-sans를 사용합니다. Design Tokens > Installation > Fonts에서 설정하세요.

Usage

Import & Usage

example.tsx

import {
  Card, CardHeader, CardTitle, CardDescription,
  CardContent, CardFooter, Button,
} from '@7onic-ui/react'

<Card>
  <CardHeader>
    <CardTitle>Project Settings</CardTitle>
    <CardDescription>Manage your project configuration.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content here</p>
  </CardContent>
  <CardFooter>
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>

Requirements

패키지	버전
`react`	≥ 18.0.0
`react-dom`	≥ 18.0.0
`tailwindcss`	v3 or v4
`@7onic-ui/tokens`	필수 (동시 설치)

Package Contents

두 개의 패키지로 구성됩니다. 컴포넌트와 토큰을 별도로 관리할 수 있습니다.

@7onic-ui/react

UI 컴포넌트 라이브러리 (dist/ 배포)

index.js / .mjs / .d.tsCJS + ESM + Types

Main

chart.js / .mjs / .d.ts@7onic-ui/react/chart

Chart

llms.txtAI Integration

import { Button, Card, Modal } from '@7onic-ui/react'import { Chart } from '@7onic-ui/react/chart'

@7onic-ui/tokens

디자인 토큰: CSS 변수, Tailwind 프리셋, JS, CLI, AI

CSS

variables, light, dark, all

Tailwind

v3-preset, v4-theme, v4

JS / Types

CJS, ESM, .d.ts, JSON

CLI / AI

sync-tokens, llms.txt

figma-tokens.jsonSSOT→ npx sync-tokens로 전체 파일 자동 생성

figma-tokens.json → npx sync-tokens로 전체 파일 자동 생성

Package Contents

Token Sync

디자인 커스터마이즈

토큰을 변경하면 컴포넌트 스타일에 자동 반영

FigmaJSONsync-tokensCSS + Components

$ npx sync-tokensToken Sync