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

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

Overview

Browse the reopt design package hub and the opt-ui layer catalog together.

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

Featured Components

View all→

Kbd

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

Indicator

Separator

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

Disclosure

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

Overlay

Tabs

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

NavIndicator

Featured Charts

View all→

ChartContainer

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

Heatmap

LineChart

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

Cartesian

PieChart

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

Radial

ComparisonChart

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

Flow

Featured Blocks

View all→

FaqAccordion

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

Display

ContentTabs

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

NavDisplay

DashboardGrid

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

Analytics

SearchCombobox

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

Filter

Featured Pages

View all→

DataExplorer

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

Data

ProjectDashboard

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

TaskDashboard

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

Workflow

ChatAssistant

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

Chat

Package Hubs

Docs hub→

opt-ui

161

Browse Core components, Shell blocks, and Surface templates.

opt-charts

21

Charts, visual analytics, and metric widgets.

opt-shell

14

Browse workspace recipes, state UX, navigation chrome, and the adapter bridge by package.

opt-datagrid

5

Browse editable grids, performance tuning, and remote datasource flows by package.

opt-editor

5

Browse the block system, AI authoring, and NDJSON streaming flows by package.

opt-chat

6

Browse chat UI components, message rendering, and tool approval flows by package.

brandapp-ui

8

Browse brandapp-sdk × opt-ui copy-paste Surface blocks with live previews.

기본 사용

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로 줄바꿈