Installation

번들러 가이드

Seed Design은 Vite, Webpack 번들러 통합을 지원합니다. 각 번들러별 가이드를 제공합니다.

Vite

Webpack

수동 설치 가이드

Seed Design을 번들러 통합 없이 설치하고 사용하는 방법을 알아봅니다.

의존성 설치

필요한 의존성들을 설치해요.

npm install @seed-design/react @seed-design/css

pnpm add @seed-design/react @seed-design/css

yarn add @seed-design/react @seed-design/css

bun add @seed-design/react @seed-design/css

index.html 수정하기

Seed Design의 컬러 토큰은 <html /> 태그의 data-seed-color-mode, data-seed-user-color-scheme 속성을 통해 라이트/다크모드 전환을 해요.

index.html

<html
  data-seed
  data-seed-color-mode="system"
  data-seed-user-color-scheme="light"
>
  <head>
    <meta name="color-scheme" content="light dark" />
    <script>
    /* user-color-scheme 설정 스크립트, 필요에 따라 수정하세요 */
    try {
      var prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

      if ('addEventListener' in prefersDark) {
        prefersDark.addEventListener('change', apply);
      } else if ('addListener' in prefersDark) {
        prefersDark.addListener(apply);
      }

      if (prefersDark.matches) {
        document.documentElement.dataset.seedUserColorScheme = 'dark';
      } else {
        document.documentElement.dataset.seedUserColorScheme = 'light';
      }

      function apply() {
        document.documentElement.dataset.seedUserColorScheme = prefersDark.matches ? 'dark' : 'light';
      }
    } catch (e) {}
    </script>
  </head>
</html>

index.html

<html
  data-seed
  data-seed-color-mode="light-only"
>
  <head>
    <meta name="color-scheme" content="light" />
    <!-- ... -->
  </head>
</html>

index.html

<html
  data-seed
  data-seed-color-mode="dark-only"
>
  <head>
    <meta name="color-scheme" content="dark" />
    <!-- ... -->
  </head>
</html>

all.css import하기

스타일시트 크기를 줄이기 위해 base.css 및 각 컴포넌트의 스타일시트를 따로 import할 수 있어요. 번들러를 사용하는 경우 문서 상단의 번들러 가이드를 통해 컴포넌트 스타일시트를 자동으로 로드할 수 있어요.

index.tsx

import "@seed-design/css/all.css";

seed-design.json 생성하기

init 명령어 입력하기

npx @seed-design/cli@latest init

seed-design 설정

◇  TypeScript를 사용중이신가요?
│  Yes
│
◇  React Server Components를 사용중이신가요?
│  No
│
◇  seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
│  ./seed-design

아래 파일을 프로젝트 루트에 생성해주세요.

seed-design.json

{
  "rsc": false,
  "tsx": true,
  "path": "./seed-design"
}

컴포넌트를 한번 사용해볼까요?

npx @seed-design/cli@latest add action-button

tsconfig.json 설정하기

tsconfig.json

{
  "compilerOptions": {
    // your options
    "paths": { 
      "seed-design/ui/*": [ 
        "./seed-design/ui/*"
      ] 
    } 
  }
}

Installation

Vite

Webpack

On this page