Installation

요구사항:

React 18 or later
Node.js 16 or later

패키지 설치

다음 중 하나의 패키지 매니저를 사용하여 Vapor UI를 설치하세요:

npm install   npm install @vapor-ui/core@latest @vapor-ui/icons@latest

프레임워크별 설정

Next.js

Next.js 프로젝트에서 Vapor UI를 설정하는 방법:

1. App Router (권장)

app/layout.tsx에 스타일을 추가하세요:

import '@vapor-ui/core/styles.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="ko">
            <body>{children}</body>
        </html>
    );
}

2. Pages Router

pages/_app.tsx에 스타일을 추가하세요:

import '@vapor-ui/core/styles.css';

import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />;
}

Vite

Vite 프로젝트에서 src/main.tsx 또는 src/main.js에 스타일을 추가하세요:

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(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
);

Create React App

src/index.js 또는 src/index.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.StrictMode>
        <App />
    </React.StrictMode>,
);

컴포넌트 사용하기

이제 React 애플리케이션에서 Vapor UI 컴포넌트를 사용할 수 있습니다:

컴포넌트 구성하기

이것은 Vapor UI를 사용하여 컴포넌트를 구성하는 예시입니다.

import { Card } from '@vapor-ui/core';

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

컴포넌트 구성하기

On this page