reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
시작하기
개요
시작하기
Next.js 설치
Manual install
핵심 개념
아키텍처
컴포지션 패턴
접근성
키보드 패턴
스타일링
로컬라이제이션
테마 시스템
고급 패턴
구축·운영
Skills
AI 연동
CLI (opt surface add)
의존 그래프
도구
Canvas 카탈로그
Theme Builder
Form Builder
템플릿
템플릿
릴리즈
릴리즈 노트
Oopt-ui
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

시작하기
  1. 문서
  2. /
  3. 시작하기
  4. /
  5. Manual install

Manual install

공개 npm manual install과 Surface CLI 사용법을 별도로 정리

reopt design · 업데이트 2026년 8월 2일

1. 패키지 매니저 설치

public npm 패키지이므로 별도 registry나 토큰 설정은 필요하지 않습니다.

bash
bun add @reopt-ai/opt-ui
bun add -d tailwindcss @tailwindcss/postcss postcss
npx @reopt-ai/opt-cli surface list

2. 패키지 설치

bash
bun add @reopt-ai/opt-ui

런타임은 @reopt-ai/opt-ui 를 import하고, 필요한 경우 optional peer dependency를 각 프로젝트에 추가합니다.

3. Surface 설치

bash
npx @reopt-ai/opt-cli surface add billing-page
  • npx @reopt-ai/opt-cli surface list 로 설치 가능한 Surface 목록을 확인합니다.

  • 복사된 Surface는 프로젝트 내부 코드로 취급하고 직접 수정합니다.

4. 문제 해결

  • 404가 나면 패키지 이름과 요청한 버전이 npmjs.org에 배포됐는지 확인합니다.

  • Surface가 최신이 아니면 CLI 버전을 확인합니다. Surface registry는 CLI 패키지와 함께 배포됩니다.

PreviousNext.js 설치App Router 기준으로 opt-ui를 설치하고 theme/provider를 연결하는 방법시작하기
Next.js 설치 페이지로 이동
Next아키텍처opt-ui Core/Shells/Surfaces와 opt-charts 분리, docs/registry 연결 방식을 설명합니다.핵심 개념