# Manual URL: /react/getting-started/installation/manual Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/getting-started/installation/manual.mdx SEED를 번들러 통합 없이 설치하고 사용하는 방법을 알아봅니다. ### 의존성 설치 필요한 의존성들을 설치해요. - npm: npm install @seed-design/react @seed-design/css - pnpm: pnpm add @seed-design/react @seed-design/css - yarn: yarn add @seed-design/react @seed-design/css - bun: bun add @seed-design/react @seed-design/css ### index.html 수정하기 SEED의 컬러 토큰은 `` 태그의 `data-seed-color-mode`, `data-seed-user-color-scheme` 속성을 통해 라이트/다크모드 전환을 해요. 테마 속성에 대한 자세한 설명과 활용 방법을 확인합니다. ```tsx title="index.html" ``` ```tsx title="index.html" ``` ```tsx title="index.html" ``` ### all.css import하기 스타일시트 크기를 줄이기 위해 `base.css` 및 각 컴포넌트의 스타일시트를 따로 import할 수 있어요. 번들러를 사용하는 경우 문서 상단의 번들러 가이드를 통해 컴포넌트 스타일시트를 자동으로 로드할 수 있어요. ```ts title="index.tsx" import "@seed-design/css/all.css"; ``` ### seed-design.json 생성하기 ### init 명령어 입력하기 ```sh npx @seed-design/cli@latest init ``` ### seed-design 설정 ```sh ◇ TypeScript를 사용중이신가요? │ Yes │ ◇ React Server Components를 사용중이신가요? │ No │ ◇ seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.) │ ./seed-design ``` 아래 파일을 프로젝트 루트에 생성해주세요. ```json title="seed-design.json" { "rsc": false, "tsx": true, "path": "./seed-design" } ``` ### 컴포넌트를 한번 사용해볼까요? ```sh npx @seed-design/cli@latest add ui:action-button ``` ### tsconfig.json 설정하기 ```json title="tsconfig.json" { "compilerOptions": { // ... your options "paths": { // [!code highlight] "seed-design/*": [ // [!code highlight] "./seed-design/*" ] } } } ``` *** SEED AppScreen을 사용하기 위해 SEED Stackflow 플러그인을 설정하는 방법을 알아봅니다.