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

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

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

© 2026 reopt-ai. All rights reserved.

개요

reopt design 패키지 허브와 opt-ui 레이어 카탈로그를 함께 탐색합니다.

182 전체·76 opt-ui·75 Blocks·31 Pages·12 Examples

주요 컴포넌트

전체 보기→

Kbd

키보드 단축키를 시각적으로 표시하는 인라인 뱃지 컴포넌트.

인디케이터

Separator

콘텐츠를 구분하는 가로/세로 디바이더. 라벨을 넣으면 가운데 정렬 구분선이 된다.

Disclosure

접기/펼치기 콘텐츠 영역. 3-part anatomy: Root, Trigger, Content.

오버레이

Tabs

탭 패널 시스템. 4-part anatomy: Root, TabList, Tab, TabPanel.

네비게이션인디케이터

주요 차트

전체 보기→

ChartContainer

Recharts ResponsiveContainer를 감싸는 반응형 차트 컨테이너. 접근성 속성과 스타일링을 지원합니다.

히트맵

LineChart

연속 데이터용 선 차트. 시간에 따른 추세나 변화를 시각화합니다.

직교 좌표

PieChart

비율/구성 데이터용 파이 차트. innerRadius를 설정하면 도넛 차트가 됩니다.

방사형

ComparisonChart

비교 차트. grouped, stacked, mirrored 3가지 레이아웃으로 카테고리 간 비교를 시각화합니다.

플로우

주요 블록

전체 보기→

FaqAccordion

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

표시

ContentTabs

탭 콘텐츠 패널. Tabs primitive 래퍼.

네비게이션표시

DashboardGrid

Composite 기반 통계 카드 그리드. 화살표 키로 2D 탐색.

분석

SearchCombobox

match-sorter 기반 퍼지 검색 콤보박스.

필터

주요 페이지

전체 보기→

DataExplorer

필터링 가능한 데이터 탐색 영역. compact SurfaceLayout 안에서 SearchCombobox + StatusSelect + DataTable을 조합.

데이터

ProjectDashboard

Vercel 스타일 프로젝트 개요 영역. DashboardGrid + DeploymentTimeline + EnvPanel 조합.

TaskDashboard

작업 관리 대시보드. TaskList + ActivityFeed + TeamMemberList + QuickActions + FilterBar 조합.

워크플로우

ChatAssistant

AI 챗봇 어시스턴트 화면. ChatSidebar + ChatMessageList + ChatInput 조합.

채팅

패키지 허브

문서 허브→

opt-ui

161

Core 컴포넌트, Shell 블록, Surface 템플릿을 탐색합니다.

opt-charts

21

Charts, visual analytics, and metric widgets.

opt-shell

14

workspace recipes, state UX, navigation chrome, adapter bridge를 패키지 단위로 탐색합니다.

opt-datagrid

5

편집형 그리드, 성능 튜닝, 원격 datasource 흐름을 패키지 단위로 탐색합니다.

opt-editor

5

블록 시스템, AI authoring, NDJSON streaming 흐름을 패키지 단위로 탐색합니다.

opt-chat

6

채팅 UI 컴포넌트, 메시지 렌더링, tool approval 흐름을 패키지 단위로 탐색합니다.

brandapp-ui

8

brandapp-sdk × opt-ui copy-paste Surface 블록을 라이브 프리뷰로 탐색합니다.

기본 사용

Command Palette를 열려면Ctrl+K를 누르세요

단일 키

EscEnterTabSpace

조합 키

Ctrl+Shift+P
⌘+K

연속 키 (순차 입력)

G HG GZ Z

가로 구분선

위 콘텐츠

아래 콘텐츠

라벨 구분선

또는

세로 구분선

프로필
설정
로그아웃

기본 사용

기본 열림 상태

opt-ui는 접근성 프리미티브 기반 UI 컴포넌트 라이브러리입니다. 키보드 탐색과 스크린 리더 지원을 기본 제공합니다.

기본 사용

개요 콘텐츠입니다.

비활성화 탭

첫 번째 활성화 탭

Basic Usage

ChartContainer는 Recharts ResponsiveContainer를 감싸고 접근성 속성을 지원합니다. 일반적으로 LineChart, BarChart, AreaChart 컴포넌트가 내부적으로 사용하므로 직접 사용할 필요는 없습니다.

Different Heights

height=150

height=300

Basic Line Chart

Multiple Series

Customization

With Dots

Without Grid

Basic Pie Chart

Donut Chart

Basic Donut

With Padding

With Labels

Custom Colors

Without Legend

Grouped

Stacked

기본 사용

기본 사용

프로젝트 개요 콘텐츠입니다.

기본 선택 탭 설정

설정 탭이 기본 선택됩니다.

기본 사용 (3열)

총 매출₩12,450,000↑ +12.5%
주문 수1,234↑ +8.2%
이탈률32.1%↓ -4.3%
전환율2.4%→ 0.0%
활성 사용자5,678↑ +15.3%
평균 세션4m 32s↓ -2.1%

2열 레이아웃

총 매출₩12,450,000↑ +12.5%
주문 수1,234↑ +8.2%
이탈률32.1%↓ -4.3%
전환율2.4%→ 0.0%

기본 사용

패키지 검색

기본 사용

상품 목록

총 7개 결과
상품명카테고리가격상태
MacBook Pro 14전자기기₩2,890,000활성
Magic Keyboard전자기기₩159,000활성
스탠딩 데스크가구₩450,000임시
에르고 체어가구₩890,000활성
모니터 암전자기기₩89,000보관
USB-C 허브전자기기₩79,000활성
책장가구₩250,000임시

기본 사용

my-awesome-app

Next.js 애플리케이션

프로젝트 통계

총 배포1,234↑ +12.5%
에러율0.23%↓ -5.2%
평균 지연시간45ms→ +2ms
가동 시간99.9%↑ +0.1%

최근 배포

환경 변수

전체 기능

프로젝트 대시보드

작업 현황 및 팀 활동

빠른 작업

통계

전체 작업24↑ +3
완료18↑ +5
진행 중4↓ -2
대기2→ 0

작업 목록

1/3 완료

최근 활동

김
김철수 생성 새 작업 생성
2026. 5. 24.
이
이영희 완료 테스트 코드 작성 완료
2026. 5. 24.

팀원

1/3 온라인

컴팩트 레이아웃

작업 목록

1/3 완료

최근 활동

김
김철수 생성 새 작업 생성
2026. 5. 24.
이
이영희 완료 테스트 코드 작성 완료
2026. 5. 24.

팀원

작업 목록만

작업 목록

1/3 완료

프로젝트 구조 설계

AI

새 프로젝트의 구조를 어떻게 잡으면 좋을까요?

오후 06:41
A

모노레포 구조를 추천합니다. Turborepo를 사용하면 빌드 캐싱과 태스크 오케스트레이션이 쉬워집니다. 기본 구조: - apps/ (애플리케이션) - packages/ (공유 패키지) - turbo.json (파이프라인)

오후 06:42
ShiftEnter로 줄바꿈