# 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 설치를 위한 가이드.
---------------------------------
요구사항:
- React 18 or later
- Node.js 16 or later
***
## 패키지 설치
다음 중 하나의 패키지 매니저를 사용하여 Vapor UI를 설치하세요:
```package-install
npm install @vapor-ui/core@latest @vapor-ui/icons@latest
```
***
## 프레임워크별 설정
### Next.js
Next.js 프로젝트에서 Vapor UI를 설정하는 방법:
#### 1. App Router (권장)
`app/layout.tsx`에 스타일을 추가하세요:
```tsx
import '@vapor-ui/core/styles.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
#### 2. Pages Router
`pages/_app.tsx`에 스타일을 추가하세요:
```tsx
import '@vapor-ui/core/styles.css';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return ;
}
```
### Vite
Vite 프로젝트에서 `src/main.tsx` 또는 `src/main.js`에 스타일을 추가하세요:
```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@vapor-ui/core/styles.css';
import App from './App.tsx';
ReactDOM.createRoot(document.getElementById('root')!).render(
,
);
```
### Create React App
`src/index.js` 또는 `src/index.tsx`에 스타일을 추가하세요:
```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@vapor-ui/core/styles.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
,
);
```
***
## 컴포넌트 사용하기
이제 React 애플리케이션에서 Vapor UI 컴포넌트를 사용할 수 있습니다:
```json doc-gen:file
{
"file": "./src/components/demo/examples/assemble-component.tsx",
"codeblock": true
}
```