opt-ui
기반 레이어
Core → Shells → Surfaces 구조의 공유 UI 컴포넌트 라이브러리
https://your-product.app
Search surfaces
NameLayerStatus
Revenue overview
contract-bound route
Pipeline grid
contract-bound route
Launch brief
contract-bound route
Agent support
contract-bound route
Settings audit
contract-bound route
Usage report
contract-bound route
Harness check
Metadata matches docs and examples.
Empty, loading, error, and review states exist.
Builder preview uses the same contract.
Complete product interface modules.
완성도 높은 컴포넌트 모듈과 도구를 한 체계로 제공합니다. UI, 데이터 그리드, 에디터, 채팅, CLI, 검증 흐름까지 제품 인터페이스를 구축하는 데 필요한 모듈을 전문적인 품질 기준으로 제공합니다.
모듈과 도구 보기Interface modules
modules.tsx
import { DataTable, Dialog, Toast } from "@reopt-ai/opt-ui";
import { DataGrid } from "@reopt-ai/opt-datagrid";tools.config.ts
export default defineReopt({
modules: ["ui", "datagrid", "editor", "chat"],
checks: ["a11y", "states"]
});https://your-app.com
Product interface kit
Compact dashboard
Component modules
Interface tools
Verification workflow
Advanced workflows for real teams.
드래그 가능한 작업 보드, 원격 데이터 그리드, 에디터 초안, 승인 상태처럼 실제 제품에서 필요한 복잡한 흐름을 같은 UI 계약 위에 올립니다.
하네스 계약 보기Open
7 screensRevenue dashboard
원격 지표와 필터 상태를 한 화면 계약에 고정합니다.
Customer table
DataGrid 편집과 저장 실패 상태를 함께 검증합니다.
Settings surface
권한, density, empty state를 route별로 점검합니다.
In review
3 checksBuilder preview
실제 Builder canvas에서 같은 화면 결과를 확인합니다.
Agent patch
AI가 바꾼 surface가 계약을 벗어나지 않는지 비교합니다.
Keyboard audit
tab order와 focus ring을 문서 예제와 함께 봅니다.
Done
12 proofsRelease note
변경된 패키지와 화면 영향을 릴리즈 노트로 연결합니다.
State matrix
loading, empty, error, review 상태가 모두 통과했습니다.
Package sync
문서, 예제, 실제 라우트가 같은 메타데이터를 씁니다.
High quality interactions everywhere.
마우스, 터치, 키보드, 스크린리더 흐름에 최적화 되어 있습니다. 컴포넌트 계약 안에서 접근성 품질을 보장합니다.
키보드 패턴 보기Keyboard friendly.
탭 이동, 단축키, typeahead, 포커스 복귀가 제품 화면 전체에서 같은 규칙을 따릅니다.
TabEnterEsc
Mouse enhanced.
hover, resize, context menu, drag feedback이 데스크톱 작업 흐름을 방해하지 않게 정리됩니다.
State complete.
로딩, 빈 화면, 오류, 리뷰 상태를 컴포넌트 소개가 아니라 실제 surface 기준으로 봅니다.
Loading
Empty
Error
Review
Focus managed.
오버레이와 리스트 삭제, drawer 전환 뒤에도 포커스가 자연스럽게 복원됩니다.
Accessibility that stays attached.
접근성은 체크리스트가 아니라 화면 계약의 일부입니다. 문서 데모, Builder 미리보기, 실제 route가 같은 semantic 기준을 유지합니다.
접근성 문서 보기6:29 PM
Permissions
Read only
Edit
Admin
ARIA semantics.
버튼, 테이블, 메뉴, 대화상자의 역할과 키보드 동작을 WAI-ARIA 패턴에 맞춥니다.
Mobile ready.
작은 화면에서도 touch target, drawer, dismiss 흐름이 깨지지 않도록 설계합니다.
Tested. Like, really.
컴포넌트 문서와 실제 화면에서 같은 상태 매트릭스를 반복 검증합니다.
Ready for an operational audience.
언어, 밀도, 폭, 모션 선호도는 제품 운영에서 계속 바뀝니다. reopt는 이 값들을 화면 제작과 검증 단계에 같이 둡니다.
레시피 보기Locale
Korean (South Korea)
Layout policy
densitywidthmotion
opt-datagrid
데이터 표시 전문 레이어
키보드 퍼스트 편집 가능 데이터 그리드 — 가상화, 셀 편집, 원격 데이터 동기화
opt-editor
콘텐츠 편집 전문 레이어
AI 퍼스트 콘텐츠 에디터 — 비주얼 WYSIWYG + NDJSON StreamCompiler 듀얼 모드
opt-chat
AI 대화 인터페이스 레이어
Vercel AI SDK 기반 스트리밍 AI 채팅 인터페이스 — 대화, 입력, 28종 렌더러
v1.8.2 · 2026-06-22