---
version: 1.0.0-beta.6
---
# Installation
URL: /docs/getting-started/installation
Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/installation.mdx
Vapor UI를 프로젝트에 설치하고 첫 컴포넌트를 사용해보세요.
***
title: Installation
description: Vapor UI를 프로젝트에 설치하고 첫 컴포넌트를 사용해보세요.
-------------------------------------------------
이 문서를 완료하면 Vapor UI 패키지를 설치하고, 첫 번째 컴포넌트를 화면에 렌더링할 수 있습니다.
## 사전 준비
다음 환경이 필요합니다.
| 요구사항 | 버전 |
| :------ | :---- |
| React | 17 이상 |
| Node.js | 16 이상 |
## 1단계: 패키지 설치
패키지 매니저를 사용하여 Vapor UI를 설치합니다.
```package-install
npm install @vapor-ui/core @vapor-ui/icons
```
## 2단계: Portal 설정
Vapor UI는 Dialog, Popover 같은 팝업 컴포넌트에 Portal을 사용합니다. Portal 컴포넌트가 항상 페이지 최상단에 표시되도록 애플리케이션 레이아웃 루트에 다음 스타일을 추가합니다.
```tsx title="layout.tsx"
{children}
```
```css title="styles.css"
.root {
isolation: isolate;
}
```
이 스타일은 `.root` 요소에 별도의 stacking context를 생성합니다. 이를 통해 팝업이 항상 페이지 콘텐츠 위에 표시되며, 다른 스타일의 `z-index` 속성과 충돌하지 않습니다.
## 3단계: 컴포넌트 사용
컴포넌트를 import하여 사용합니다.
```json doc-gen:file
{
"file": "./src/components/demo/examples/assemble-component.tsx",
"codeblock": true
}
```
## 다음 단계
* [테마 설정하기](/theme/theme-provider) - 라이트/다크 모드 및 커스텀 테마 설정 방법
* [컴포넌트 살펴보기](./overview#components) - 다양한 UI 컴포넌트 사용법