reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
Overview161Core55Blocks75Pages31
reopt designreopt design

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

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

© 2026 reopt-ai. All rights reserved.

Explore/블록/CodeSnippetViewer

CodeSnippetViewer

블록

코드 스니펫 뷰어. 줄 번호, 복사 버튼을 지원하는 코드 표시 컴포넌트.

editor
관련 문서
npx @reopt-ai/opt-cli surface add code-snippet-viewer
100%
analytics.ts
1import { track } from "@reopt-ai/analytics";
2
3// Track a page view event
4track("page_view", {
5 path: window.location.pathname,
6 referrer: document.referrer,
7 title: document.title,
8});

관련 컴포넌트

EditorToolbar

리치 텍스트 에디터 스타일 툴바. Toolbar + Tooltip 조합.

에디터

SqlEditor

SQL 에디터. CodeMirror 기반의 SQL 편집기로 구문 강조와 자동 완성을 지원합니다.

에디터

RichTextEditor

마크다운 리치 텍스트 에디터. 서식 툴바 + textarea 조합.

에디터

CodeDiffViewer

코드 비교 뷰어. LCS 알고리즘 기반 unified/split 모드 diff.

에디터

FaqAccordion

FAQ 질문/답변 아코디언. Composite + Disclosure 조합.

표시

PageAside

Sticky 페이지 사이드 aside chrome. 고정 너비 + header/body/footer 3-slot.

이전WorkflowCanvas다음PropertyExplorer

기본 사용



활성: bold

Ctrl+Enter to run
1- function greet(name) {
2- console.log("Hello " + name);
1+ function greet(name: string) {
2+ console.log(`Hello ${name}`);
3+ console.log("Done");
34 return true;
45 }

기본 사용

Header + Nav + Footer 3-slot

Docs

설치
빠른 시작
토큰
Shells

4 sections

메인 콘텐츠 영역

Header / Footer 없이 Nav만

설치
빠른 시작
토큰
Shells
콘텐츠

Slot padding override — headerClassName / bodyClassName

Explore

넓은 header padding으로 타이틀+부연 설명 레이아웃

설치
빠른 시작
토큰
Shells

12 components

콘텐츠