# Installation
URL: /docs/getting-started/installation

Vapor UI 설치를 위한 가이드.

<b style={{ marginBottom: 0 }}>요구사항:</b>

<ul style={{ marginTop: 0 }}>
  <li>React 18 or later</li>
  <li>Node.js 16 or later</li>
</ul>

***

### 1. 패키지 설치

Vapor UI를 설치하세요:

```package-install
npm install @vapor-ui/core
```

<br />

### 2. 스타일 추가

애플리케이션 루트에 스타일을 추가하세요:

{/* prettier-ignore */}

<Tabs items={[".jsx", ".css"]} defaultValue=".jsx">
  <Tab value=".jsx">
    ```tsx
    import '@vapor-ui/core/styles.css'; 
    ```
  </Tab>

  <Tab value=".css">
    ```css
    @import '@vapor-ui/core/styles.css'; 
    ```
  </Tab>
</Tabs>

<br />

### 3. 컴포넌트 구성하기

이제 React 애플리케이션에서 Vapor UI 컴포넌트를 사용할 수 있습니다. 다음은 간단한 컴포넌트를 구성하는 예시입니다:

<Demo name="assemble-component">
  ```tsx
  import { Card } from "@vapor-ui/core";

  export default function AssembleComponent() {
    return (
      <Card>
        <Card.Header>
          <h2>컴포넌트 구성하기</h2>
        </Card.Header>
        <Card.Body>
          <p>이것은 Vapor UI를 사용하여 컴포넌트를 구성하는 예시입니다.</p>
        </Card.Body>
      </Card>
    );
  }
  ```
</Demo>

<br />