# Rsbuild
URL: /react/getting-started/installation/rsbuild
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/getting-started/installation/rsbuild.mdx

Rsbuild 프로젝트에서 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

### base.css import하기

```ts title="index.tsx"
import "@seed-design/css/base.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"
}
```

### tsconfig.json 설정하기

<Callout>
  위에서 설정한 [seed-design.json path](/react/getting-started/cli/configuration#path)의 경로와 동일해야 해요.
</Callout>

```json title="tsconfig.json"
{
  "compilerOptions": {
    // ... your options
    "paths": {
      // [!code highlight]
      "seed-design/*": [
        // [!code highlight]
        "./seed-design/*"
      ]
    }
  }
}
```

### Rsbuild config 수정하기

- npm: npm install -D @seed-design/rsbuild-plugin
- pnpm: pnpm add -D @seed-design/rsbuild-plugin
- yarn: yarn add --dev @seed-design/rsbuild-plugin
- bun: bun add --dev @seed-design/rsbuild-plugin

<Callout>
  `seedDesignPlugin`은 [theming](/react/getting-started/styling/theming) 및 CSS 파일 자동 로드 등을 담당해요.
</Callout>

```ts title="rsbuild.config.ts"
import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { seedDesignPlugin } from "@seed-design/rsbuild-plugin"; // [!code highlight]

export default defineConfig({
  plugins: [
    pluginReact(),
    seedDesignPlugin(), // [!code highlight]
  ],
});
```

#### 플러그인 옵션

옵션 없이 쓰면 색상 모드가 사용자의 시스템 설정을 따라갑니다. 항상 라이트나 다크로 고정하려면 `colorMode`를 지정하세요.

| 옵션                     | 타입                                        | 기본값        | 설명                                          |
| ---------------------- | ----------------------------------------- | ---------- | ------------------------------------------- |
| `colorMode`            | `"system" \| "light-only" \| "dark-only"` | `"system"` | 전역 색상 모드. `system`은 사용자의 OS 설정을 따릅니다        |
| `injectColorSchemeTag` | `boolean`                                 | `true`     | `color-scheme` 메타 태그를 주입할지 여부               |
| `fontScaling`          | `boolean`                                 | `false`    | iOS에서 사용자의 시스템 글자 크기 설정에 따라 텍스트를 확대·축소할지 여부 |

```ts title="rsbuild.config.ts"
seedDesignPlugin({
  colorMode: "light-only",
});
```

색상 모드가 어떻게 동작하는지는 [Theming](/react/getting-started/styling/theming)에서 다룹니다.

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

```sh
npx @seed-design/cli@latest add ui:action-button
```

***

<Card title="Getting Started with Stackflow" href="/react/stackflow/getting-started">
  SEED AppScreen을 사용하기 위해 SEED Stackflow 플러그인을 설정하는 방법을 알아봅니다.
</Card>