NewContract-first UIFrom surface to harness contract in one flow

Design system for builders

Design tools for agentic engineers. Build consistent product screens faster with proven components.

Explore components Start Builder

GeneralMembersBilling

GeneralDraft

Workspace nameAcme product

VisibilityTeam members

RegionSeoul

Require reviewEvery change needs one approval

CancelSave changes

Members3 of 12

JPJae Parkjae@acme.ioOwner

MSMina Seomina@acme.ioEditor

AKAlex Kimalex@acme.ioViewer

Invite people

Search accountsStage is ActivePlanNew

AccountOwnerStagePlanMRR

NNorthwindJae ParkActiveScale$4,820

UUmbrellaMina SeoTrialTeam$1,240

IInitechAlex KimActiveScale$7,360

GGlobexSena KoReviewTeam$2,970

SSoylentDan LeeActiveEnterprise$5,180

VVehementRio HanTrialTeam$3,410

Revenue$228,4413.3%

Expenses$25,1083.3%

Accounts4583.3%

Profit$203,1334.1%

Sales performanceLast 8 months

$28,441Weekly sales$4,063Daily sales278Total sales

JanFebMarAprMayJunJulAug

Traffic sourceOrganicPaid

231,856Sessions

ParagraphAsk AIStreaming patch

Launch briefThe settings surface ships with its contract attached, so the review step reads the same spec the screen renders.Attach the contract to the surfaceStream the review step from the same spectsapplyJsonPatch(spec, ops)Layered product frame, isometricpromptRollout targets stay in the same manifest, so agents and people edit one document.Tab

AI commands✨Improve writing→Continue writing📋Summarize

Patch streamRFC 6902

replace/blocks/1/textparagraphadd/blocks/3todoadd/blocks/4codeadd/blocks/5imagereplace/blocks/3/checkedtruestreaming

March 11 – 15WeekMonthBookingStreaming patch

Mon11Tue12Wed13Thu14Fri1509:0010:0011:0012:0013:0014:0015:00Design sync10:00Onboarding09:00Roadmap11:001:1 Mina13:00Release check10:00Support sync14:00Retro15:00

March 2026

SMTWTFS12345678910111213141516171819202122232425262728

Wed, March 1309:303 seats left10:002 seats left10:305 seats left11:001 seat left13:304 seats left

BookingsJae ParkMar 13, 10:00PendingConfirmMina SeoMar 12, 14:00Confirmed

What ships in the module set?

UI, data grid, charts, editor, and chat — all on one token system.

Which modules fit a revenue dashboard?

searched opt-charts docs412msBarChart covers monthly revenue with a stacked series.LineChart handles the traffic trend beside it.revenue-page.tsxtsx<BarChart data={mrr} stacked /><LineChart data={traffic} />opt-chartsbar-chart.mdx

Claude Opus 5Ask about modules

opt-uiForms, dialogs, and tables for product screens

opt-datagridKeyboard-first editing over remote data

opt-chartsMetrics and charts on shared tokens

opt-editorSchema-driven editor with streaming edits

opt-calendarEvents, bookings, and availability

opt-chatStreaming AI chat with tool calls

All-in-one UI components.

From buttons and forms to data grids, charts, screen structure, and inspection tools, everything you need for product UI is available in one place. Pick what you need and jump straight into the docs or a working example.

Explore product docs

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-devtoolInspects contracts and states over the running screen.
FRAMEopt-shellSets the app frame and workspace policy.
DATAopt-datagridHandles large data as an editable grid.
VISUALSopt-chartsVisualizes metrics on the same tokens.
FOUNDATIONopt-uiPlaces base components on accessibility primitives.

AI-first components, with review built in.

Review AI suggestions for content, data, schedules, and responses as they arrive, then apply only what you need. Important changes never take effect before you review them.

Read the streaming contracts

Launch briefJSON Patch · RFC 6902opt-ui, opt-shell, and the studio tools already ship in this release. This brief covers what is left before the beta.ScopePricing, checkout, and the plan catalog API. Everything else stays behind the current flag.TimelineShip the beta sometime in Q4 on March 18 with the pricing page.Launch checklistPricing, checkout, and the plan catalog API ship together,so the paid loop is testable end to end on day one.Growth reviews the funnel until the first cohort renews.Tab to accept the next sentence…

Accountsviewport 40–79snapshot v4212,480 rowsAccountOwnerPlanMRRStatusNorthwindMina SeoPro$2,400ActiveContosoJae ParkTeam$980ActiveInitechAlex KimScale$12,400ActiveUmbrellaSara LeePro$1,860ActiveGlobexDan ChoTeam−$40ReviewSoylentJi WooPro$3,120ActiveVehementRio HanTeam$740TrialMassive Dyn.Sena KoScale$9,050ActiveSave batch · 12 editsrejectedEdits[0] · MRR ≥ 011 applied1 rejected

ScheduleFind 30 min with Mina before FridayMON 11TUE 12WED 13THU 14FRI 150910111213Standup09:00Design10:30Launch09:301:1 Mina11:00Handoff12:00Retro13:00

Move the launch review earlier and update the brief.Thought for 3sThe brief and the calendar both reference the launch date.Rescheduling first keeps the document patch consistent.updateScheduleAwaiting approval{ "eventId": "launch-review", "start": "2026-03-11T09:30" }ApproveRejectapproveToolCall(id)patchBriefApplied[{ "op": "replace", "path": "/blocks/2/text", … }]Launch review moved to Wed 09:30 and the brief now reads March 18.The pricing paragraph is still waiting on your approval in the editor.

Ask a follow-up…Send

opt-editorApprove or revert block by block.

opt-datagridRefetch the visible window, revert rejected edits.

opt-calendarApprove proposed events one at a time.

opt-chatA tool call waits until you approve it.

High quality interactions everywhere.

Mouse, touch, keyboard, or screen reader—every input method supports a natural workflow. Interactions stay consistent as users move across screens.

Learn keyboard patterns

Keyboard friendly.

Tab order, shortcuts, typeahead, and focus restore follow the same rules across product screens.

Mouse enhanced.

Hover, resize, context menus, and drag feedback support dense desktop workflows.

State complete.

Loading, empty, error, and review states are checked on real surfaces, not just component demos.

Focus managed.

Focus returns naturally after overlays, list deletion, and drawer transitions.

Accessibility standards, built in.

Accessibility is built into the screen from the start, not added at the end. Docs examples, Builder previews, and live product screens follow the same accessibility baseline.

Learn accessibility

12:27

ATLAS WORKSPACE

Permissions

Choose what Jordan can do in this workspace.

Read onlyView content

EditCreate & update

AdminManage workspace

ARIA semantics.

Buttons, tables, menus, and dialogs follow WAI-ARIA roles and keyboard behavior.

Mobile ready.

Touch targets, drawers, and dismiss flows hold together on small screens.

Tested. Like, really.

The same state matrix is repeatedly verified in docs and product routes.

Every module takes your locale.

Adapt labels and date, time, and number formats across calendar, editor, chat, and data-grid experiences. Korean and English work out of the box, and you can add the copy needed for other languages.

Read the localization guide

2026년 3월오늘일정 추가

일월화수목금토

스탠드업코드 리뷰오후 3:30팀 회의1:1회고

오후 3:30팀 회의

날짜2026년 3월 14일

시각오후 3:30

숫자1,234,567.89

상대 시간3일 전

<Calendarmessages={koMessages}locale="ko-KR"/>

March 2026TodayNew event

SunMonTueWedThuFriSat

StandupCode review3:30 PMTeam sync1:1Retro

3:30 PMTeam sync

DateMarch 14, 2026

Time3:30 PM

Number1,234,567.89

Relative3 days ago

<Calendarlocale="en-US"/>

2026年3月今天新建日程

周日周一周二周三周四周五周六

站会代码评审15:30团队会议1:1复盘

15:30团队会议

日期2026年3月14日

时间15:30

数字1,234,567.89

相对时间3天前

<Calendarmessages={zhMessages}locale="zh-CN"/>

2026年3月今日予定を追加

日月火水木金土

朝会レビュー15:30チーム会議1on1振り返り

15:30チーム会議

日付2026年3月14日

時刻15:30

数値1,234,567.89

相対時間3 日前

<Calendarmessages={jaMessages}locale="ja-JP"/>

Intl.DateTimeFormat{OPT_TODAY}{OPT_NEW_EVENT}

0123456

titlestartHH:mm{OPT_UNTITLED_EVENT}allDaylocation

HH:mm{OPT_UNTITLED_EVENT}

messagesCalendarMessages

localeIntl.DateTimeFormat

weekStartsOn0 – 6

timeZoneIANA

<Calendarmessages={myMessages}locale={myLocale}/>

One koMessages import turns every toolbar and view label Korean.

English is opt-calendar's default, so there is no catalog to pass.

Region variants split on the tag alone — zh-CN and zh-TW differ in weekday spelling and 12/24-hour clock.

A locale the packages don't ship. Fill in CalendarMessages and missing keys fail at compile time.

Label slots show the keys you fill; readout slots show the knob behind each value. Any tag works.

Studio tools for product design in your browser.

Choose colors and themes, build forms and layouts, and prepare store images without installing anything. Carry the result from one tool directly into the next.

Start with tools

Color Kit

SeedColor value#2563ebReset

HarmonyComplementaryOpposing colors for decisive contrastAnalogousNeighboring colors for a smooth progressionTriadicThree balanced colors spaced 120° apartSplit comp.Three colors balancing contrast and stabilityTetradicFour colors distributed at 90° intervals

ShapeRadiusSharpMediumRoundedShadowNoneSubtleMediumStrongNeutralsAutoWarmCool

Harmony mapRotates the seed hue in OKLCH space to create balanced role colors.Generated in OKLCH

Harmony on the color wheelPrimary#2563ebSecondary#ad5400Accent#727700Surface#f8fafcText#101215PrimaryHue 263°SeedSecondaryHue 53°+150°AccentHue 113°+210°

Color KitBrand system readyTokensGeneratedContrastGeneratedGradientGenerated

Gradient Lab

PresetsStart from a complete layer stack.AuroraluminousSignaldarkLagoonluminousPrismeditorialGraphiteneutralCobaltdark

CanvasWeb hero1920×1080OG image1200×630Square1080×1080

LayersStack, blend, and reorder.Baselinear · NormalGlowradial · ScreenSweepconic · Soft lightFine grainnoise · Soft light

Aurora1920 × 1080 · 16:9 web hero4 layersSafe content areaDesigned as a reusable background asset.Use the handles to place light and control its visual balance.

Export / Inspector

InspectorLayer nameGlowBlendScreenOpacity100%Center X16%Center Y10%Radius120%

Color stops#c2497f0%#2aa6b8100%

LegibilityWhite text3.40:1Black text2.56:1Foreground#FFFFFF · Review

ExportCopy CSSDownload PNG

Theme Builder

DefaultCorpPlayMinNatProLightDarkLight onlyMy Custom ThemeDownload

OverviewLive theme structure summary.Tokens53Colors39Changed3Light modeDual modePreset clean

Accent Quick SwitchApply a derived accent family from a single color.Current accenthsl(221 83% 53%)BlueEmeraldVioletRoseAmber

SurfaceBackgrounds and containers.Surface--opt-surfaceSurface Raised--opt-surface-raisedAccent--opt-accentText--opt-text

My Custom Themedefault presetLightDual mode3 changedEssentialFormsDataFeedbackNavTypeLayersPalettePrimarySecondaryGhostDangerDisabledDefaultSuccessWarningErrorInfoInfoInformation messageSuccessOperation completedWarningPlease reviewErrorSomething went wrongCard TitleCard content with secondary text color — surface, border, and shadow tokens together.

Send to another tool

Applied gradient from Gradient Lab

Form Builder

SettingsWizardDynamicMyForm

Settings form3 fields · 3 requiredFields↑↓ select · ↵ edit · ⌥↑↓ reorderAddAaName*name · TextEmail*email · EmailMessage*message · Textarea

MyFormPreviewing settings form3 fields3 required0 validationsNameJae ParkEmailyou@example.comMessageWrite your message…Save

Generated TypeScriptCopyDownloadimport { SettingsForm } from "@reopt-ai/opt-ui";import type { FormFieldDef } from "@reopt-ai/opt-ui";const fields: FormFieldDef[] = [ { name: "name", label: "Name", required: true }, { name: "email", label: "Email", type: "email", required: true }, { name: "message", label: "Message", type: "textarea", required: true },];export function MyForm() {

All 198coreButtonbuttoncoreInputinputcoreBadgebadgecoreSelectselectvisualsAreaChartarea-chartcoreKbdkbdcoreDialogdialogshellsDashboardGriddashboard-gridcoreSwitchswitchcoreCheckboxcheckboxvisualsBarChartbar-chartcoreHeadingheadingcoreTexttextblocksSignInGatesign-in-gateshellsSidebarNavsidebar-navshellsDeploymentTimelinedeployment-timelinevisualsSparklinesparklinecoreSeparatorseparatorcoreOtpFieldotp-fieldblocksReoptRecordTablereopt-record-tableshellsContentTabscontent-tabsvisualsGaugeChartgauge-chartshellsFaqAccordionfaq-accordionshellsCommandPalettecommand-paletteshellsStatusSelectstatus-select

Core59Visuals33Shells75Surfaces31All198Scroll to pan · Ctrl+Scroll to zoom · 1–5 sheets · F filters32%Fit

Store Screenshot Studio

1Start2Style3Screens4Output

Upload screenshotsDrop 4–8 real app screens; colors and typography follow.Select 4–8 screenshotsPNG · JPG · WebP, up to 12MB each

App infoApp namereopt designOne-line pitchA calmer way to plan every day.

Platform · formatStore specs and social ratios drive the canvas.App Store1290×2796 · iPhone 6.9"Play Store1080×1920 · 1024×500IG Feed1080×1080 · social

reopt designA calmer way to plan every day.Plan TodayPlan priorities and time blocks before the day gets busy.reopt todoTodayAllWorkPersonalReview design screenshotsApp Store galleryHighWrite launch checklist17 checks pendingTodayAudit color tokensDesign systemDoneSend store assets2 screens ready3 PMNext upSync product notesTodayProjectsFocusNotesStats

Store Package

Store readinessSample preview0/8 uploadedSample screens — upload your own to publish.

ExportApp Store + Google Play ZIPCurrent preview imageCopy briefCopy JSON

Current setTemplateApp Store setPreview2400 × 1350Store assets11 filesDeviceiPhone 6.9"Screens5

Deployment specsApp Store iPhone 6.91290 × 2796 / 8 PNGPlay Store Phone1080 × 1920 / 8 JPGPlay Feature Graphic1024 × 500 / 1 JPG

Generate opt design tokens, brand gradients, swatches, and contrast output from a seed color.

Compose layered CSS gradients, preview overlays, and export production-ready background recipes.

Edit the canonical CSS token set live, preview the result, and export production-ready CSS.

Add, edit, and reorder fields visually with live preview and TypeScript export.

Browse opt-ui Core/Shells/Surfaces and opt-charts charts on a Figma-style infinite canvas.

Upload 4–8 real app screens, automatically shape the copy, backdrop, and typography, and export App Store, Google Play, and social-ready assets.

A role-based package catalog.

Compare the problem each package solves, how to install it, and where to start. Choose only the capabilities your product needs.

Open docs hub

opt-ui
Foundation layer
Shared UI component library structured as Core → Shells → Surfaces
Docs Explore Theme Builder Form Builder Canvas
opt-charts
Visualization layer
Specialist package for charts and data visualization — Recharts wrappers, heatmaps, funnels, and metric shells
Docs Explore Canvas
opt-datagrid
Data display specialist layer
Keyboard-first editable data grid — virtualization, cell editing, and remote data sync
Docs Explore Playground
opt-editor
Content editing specialist layer
AI-first content editor — dual mode with visual WYSIWYG and an NDJSON StreamCompiler
Docs Explore Playground
opt-chat
AI conversation interface layer
Streaming AI chat interface built on the Vercel AI SDK — conversations, input, and 28 renderers
Docs Explore Playground
opt-calendar
Scheduling & booking specialist layer
AI-first calendar & booking engine — events, booking, recurrence, timezone, and AI streaming on one store
Docs Playground
opt-filemanager
File browsing layer
Connector-driven file manager — browsing, upload queues, and file detail behind capability gating
Docs Explore Playground
opt-shell
Runtime frame
Runtime product frame between opt-ui and product screens — workspaces, policies, adapters
Docs Explore
opt-cli
The harness
The harness — verify product screens against their contract from the CLI
Docs Explore
opt-devtool
Dev tools layer
Dev-only inspector overlay — runtime state visualization and a cross-module debug bridge
Docs Explore
brandapp-ui
UI integration layer
brandapp-sdk × opt-ui copy-paste Surface blocks — install auth UI with a single `opt surface add`
Docs Explore

v1.14.0 · 2026-08-03

Latest release

커넥터 기반 파일 매니저 opt-filemanager 첫 공개 — capability 게이팅 위의 탐색·업로드 파이프라인·파일 상세와 mock/brandapp 커넥터를 제공합니다.

Release notes

All-in-one UI components.

AI-first components, with review built in.

High quality interactions everywhere.

Keyboard friendly.

Mouse enhanced.

State complete.

Focus managed.

Accessibility standards, built in.

Permissions

ARIA semantics.

Mobile ready.

Tested. Like, really.

Every module takes your locale.

Studio tools for product design in your browser.

A role-based package catalog.

opt-ui

opt-charts

opt-datagrid

opt-editor

opt-chat

opt-calendar

opt-filemanager

opt-shell

opt-cli

opt-devtool

brandapp-ui

Latest release