Start

Next.js 설치

App Router 기준으로 opt-ui를 설치하고 theme/provider를 연결하는 방법

reopt designUpdated Jun 26, 2026

1. GitHub Packages 인증

read:packages 권한이 있는 GITHUB_TOKEN 을 설정하고 .npmrc 에 registry를 추가합니다.

ini

@reopt-ai:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

2. 패키지 설치

bash

bun add @reopt-ai/opt-ui
bun add -d tailwindcss @tailwindcss/postcss postcss

3. globals.css 설정

Tailwind가 opt-ui dist를 스캔하도록 canonical integration CSS를 등록합니다.

css

@import "tailwindcss";
@import "@reopt-ai/opt-ui/tailwind.css";

@source "../node_modules/@reopt-ai/opt-ui/dist";

4. PostCSS 설정

Tailwind CSS v4 plugin을 PostCSS에 연결합니다.

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

5. App Router layout 연결

루트 layout에서 OptThemeProvider 로 앱을 감쌉니다.

tsx

import { OptThemeProvider } from "@reopt-ai/opt-ui";
import "./globals.css";

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

6. Surface 사용

Surface는 CLI로 소스를 복사합니다. 복사된 파일은 보통 components/surfaces 아래에 저장됩니다.

bash

npx @reopt-ai/opt-cli surface add billing-page

Start

Next.js 설치

App Router 기준으로 opt-ui를 설치하고 theme/provider를 연결하는 방법

reopt designUpdated Jun 26, 2026

1. GitHub Packages 인증

read:packages 권한이 있는 GITHUB_TOKEN 을 설정하고 .npmrc 에 registry를 추가합니다.

ini

@reopt-ai:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

2. 패키지 설치

bash

bun add @reopt-ai/opt-ui
bun add -d tailwindcss @tailwindcss/postcss postcss

3. globals.css 설정

Tailwind가 opt-ui dist를 스캔하도록 canonical integration CSS를 등록합니다.

css

@import "tailwindcss";
@import "@reopt-ai/opt-ui/tailwind.css";

@source "../node_modules/@reopt-ai/opt-ui/dist";

4. PostCSS 설정

Tailwind CSS v4 plugin을 PostCSS에 연결합니다.

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

5. App Router layout 연결

루트 layout에서 OptThemeProvider 로 앱을 감쌉니다.

tsx

import { OptThemeProvider } from "@reopt-ai/opt-ui";
import "./globals.css";

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

6. Surface 사용

Surface는 CLI로 소스를 복사합니다. 복사된 파일은 보통 components/surfaces 아래에 저장됩니다.

bash

npx @reopt-ai/opt-cli surface add billing-page