opt-ui
기반 레이어
Core → Shells → Surfaces 구조의 공유 UI 컴포넌트 라이브러리
Design system for builders
에이전틱 엔지니어를 위한 디자인 도구입니다. 검증된 컴포넌트로 제품 화면을 더 빠르고 일관되게 완성하세요.
opt-ui폼, 다이얼로그, 테이블 등 화면 기본 컴포넌트
opt-datagrid키보드 편집과 원격 데이터 그리드
opt-charts같은 토큰을 쓰는 지표와 시각화
opt-editor스키마 기반 스트리밍 콘텐츠 에디터
opt-calendar일정과 예약 가능 시간 관리 캘린더
opt-chat스트리밍과 도구 호출 AI 대화
All-in-one UI components.
버튼과 폼부터 데이터 표, 차트, 화면의 기본 구조와 점검 도구까지 제품 화면에 필요한 요소를 한곳에서 제공합니다. 필요한 기능을 골라 문서와 실제 예제로 바로 확인하세요.
제품 문서 살펴보기https://your-product.app
Pipelinecontract-bound route · 1,284 rowsInvite
Pipeline$1.24M6.2%
Win rate38.4%1.8%
Cycle21d3.1%
Revenue by monthBaseExpansion
AccountPlanStatusARR
NorthwindScaleReady$248,400
InitechEnterpriseReview$182,900
GlobexTeamDraft$96,250
UmbrellaScaleLive$141,780
surface.pipelinecontractboundstates4 / 4a11ypass
- INSPECTopt-devtool실행 중인 화면 위에서 계약과 상태를 검사합니다.
- FRAMEopt-shell앱 프레임과 워크스페이스 정책을 정합니다.
- DATAopt-datagrid대량 데이터를 편집 가능한 그리드로 다룹니다.
- VISUALSopt-charts같은 토큰 위에서 지표를 시각화합니다.
- FOUNDATIONopt-ui접근성 프리미티브 위에 기본 컴포넌트를 놓습니다.
AI-first components, with review built in.
AI가 제안한 문서, 데이터, 일정, 답변을 실시간으로 확인하고 필요한 내용만 반영할 수 있습니다. 중요한 변경은 사용자가 확인하기 전에는 적용되지 않습니다.
스트리밍 계약 살펴보기AI
AI
opt-editor블록 단위로 승인하거나 되돌립니다.
opt-datagrid보이는 구간만 다시 읽고, 거절된 편집은 원복합니다.
opt-calendar제안된 일정을 하나씩 승인합니다.
opt-chat도구 호출은 승인 전까지 멈춰 섭니다.
High quality interactions everywhere.
마우스, 터치, 키보드, 스크린리더 중 어떤 방식으로 사용해도 자연스럽게 작업할 수 있습니다. 화면이 바뀌어도 같은 동작 방식과 흐름을 유지합니다.
키보드 패턴 보기Keyboard friendly.
탭 이동, 단축키, typeahead, 포커스 복귀가 제품 화면 전체에서 같은 규칙을 따릅니다.
Mouse enhanced.
hover, resize, context menu, drag feedback이 데스크톱 작업 흐름을 방해하지 않게 정리됩니다.
State complete.
로딩, 빈 화면, 오류, 리뷰 상태를 컴포넌트 소개가 아니라 실제 surface 기준으로 봅니다.
Focus managed.
오버레이와 리스트 삭제, drawer 전환 뒤에도 포커스가 자연스럽게 복원됩니다.
Accessibility standards, built in.
접근성은 마지막에 덧붙이는 기능이 아니라 처음부터 화면에 포함됩니다. 문서의 예제부터 Builder 미리보기와 실제 제품 화면까지 같은 접근성 기준을 유지합니다.
접근성 문서 보기ATLAS WORKSPACE
Permissions
Choose what Jordan can do in this workspace.
ARIA semantics.
버튼, 테이블, 메뉴, 대화상자의 역할과 키보드 동작을 WAI-ARIA 패턴에 맞춥니다.
Mobile ready.
작은 화면에서도 touch target, drawer, dismiss 흐름이 깨지지 않도록 설계합니다.
Tested. Like, really.
컴포넌트 문서와 실제 화면에서 같은 상태 매트릭스를 반복 검증합니다.
Every module takes your locale.
캘린더, 에디터, 채팅, 데이터 표의 문구와 날짜·시간·숫자 형식을 서비스 지역에 맞게 바꿀 수 있습니다. 한국어와 영어는 바로 사용하고, 다른 언어도 필요한 문구를 추가해 적용할 수 있습니다.
로컬라이제이션 문서 보기koMessages 하나로 툴바와 뷰 라벨 전체가 한국어가 됩니다.
영어는 opt-calendar의 기본값이라 카탈로그를 넘길 필요가 없습니다.
지역 변형도 태그 하나로 갈립니다 — zh-CN과 zh-TW는 요일 표기와 12/24시간 표기가 서로 다릅니다.
패키지가 싣지 않는 로케일. CalendarMessages 타입을 채우면 키 누락이 컴파일에서 걸립니다.
라벨 자리에는 채워야 할 키가, 판독 자리에는 그 값을 만드는 노브가 있습니다. 태그는 무엇이든 됩니다.
Studio tools for product design in your browser.
색과 테마를 정하고, 폼과 화면 구성을 만들고, 스토어 이미지를 준비하는 도구를 설치 없이 사용할 수 있습니다. 한 도구에서 만든 결과를 다음 작업으로 바로 이어갈 수 있습니다.
도구 시작하기시드 컬러 하나로 opt 디자인 토큰, 브랜드 그라디언트, 스와치, 대비 결과를 생성합니다.
레이어형 CSS 그라디언트를 조합하고 오버레이를 미리 본 뒤 배경 레시피로 내보냅니다.
표준 CSS 토큰 세트를 실시간으로 편집하고 라이브 미리보기와 함께 CSS로 내보냅니다.
필드를 시각적으로 추가·편집·재정렬하고 실시간 미리보기와 TypeScript 코드 내보내기를 지원합니다.
opt-ui Core/Shells/Surfaces와 opt-charts 차트를 Figma 스타일 무한 캔버스에서 탐색합니다.
실제 앱 화면 4~8장을 올리면 문구, 배경, 타이포를 자동 구성해 App Store·Google Play·소셜 에셋으로 내보냅니다.
A role-based package catalog.
각 패키지가 해결하는 문제와 설치 방법, 시작 문서를 한눈에 비교할 수 있습니다. 지금 필요한 기능부터 골라 사용하세요.
문서 허브 보기opt-datagrid
데이터 표시 전문 레이어
키보드 퍼스트 편집 가능 데이터 그리드 — 가상화, 셀 편집, 원격 데이터 동기화
opt-editor
콘텐츠 편집 전문 레이어
AI 퍼스트 콘텐츠 에디터 — 비주얼 WYSIWYG + NDJSON StreamCompiler 듀얼 모드
opt-chat
AI 대화 인터페이스 레이어
Vercel AI SDK 기반 스트리밍 AI 채팅 인터페이스 — 대화, 입력, 28종 렌더러
opt-calendar
일정·예약 전문 레이어
AI 퍼스트 캘린더 · 예약 엔진 — 이벤트, 예약, 반복, 타임존, AI 스트리밍을 한 store로
opt-filemanager
파일 브라우징 레이어
커넥터 기반 파일 매니저 — 탐색, 업로드 큐, 파일 상세를 capability 게이팅으로
v1.14.0 · 2026-08-03
최근 업데이트
커넥터 기반 파일 매니저 opt-filemanager 첫 공개 — capability 게이팅 위의 탐색·업로드 파이프라인·파일 상세와 mock/brandapp 커넥터를 제공합니다.