reopt design

Contract-first UI

The page shows the surface first, then carries it into packages, harness contracts, and Builder verification.

Start Builder

Build verified product screens with reopt design.

Accessible parts, product frames, state contracts, and agent checks are tied into one screen-building flow. The result is not just pretty components, but product UI that can be operated.

Get startedExplore components
https://your-product.app
Search surfaces
NameLayerStatus
Revenue overview
contract-bound route
SurfaceReady
Pipeline grid
contract-bound route
DataGridReview
Launch brief
contract-bound route
EditorDraft
Agent support
contract-bound route
ChatLive
Settings audit
contract-bound route
ShellReady
Usage report
contract-bound route
SurfaceLive
Harness check
Metadata matches docs and examples.
Empty, loading, error, and review states exist.
Builder preview uses the same contract.
Packages
opt-uiopt-datagridopt-editoropt-chat
View Builder example

Complete product interface modules.

reopt provides production-grade component modules and tools as one system: UI, data grids, editors, chat, CLI, and verification flows for building polished product interfaces with professional quality standards.

Explore modules and tools
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.

Drag boards, remote data grids, editor drafts, and approval states sit on the same UI contract instead of becoming one-off screens.

Learn harness contracts

Open

7 screens
Revenue dashboard

Remote metrics and filter state are pinned to a screen contract.

Customer table

DataGrid editing and save failure states are checked together.

Settings surface

Permissions, density, and empty state are audited per route.

In review

3 checks
Builder preview

The same screen result is checked in the real Builder canvas.

Agent patch

AI edits are compared against the active contract.

Keyboard audit

Tab order and focus rings are reviewed beside docs examples.

Done

12 proofs
Release note

Changed packages and screen impact connect to release notes.

State matrix

Loading, empty, error, and review states all passed.

Package sync

Docs, examples, and live routes use the same metadata.

High quality interactions everywhere.

Mouse, touch, keyboard, and screen reader flows stay under the same component contract instead of being styled as separate afterthoughts.

Learn keyboard patterns

Keyboard friendly.

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

TabEnterEsc

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.

Loading
Empty
Error
Review

Focus managed.

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

Accessibility that stays attached.

Accessibility is part of the screen contract. Docs demos, Builder previews, and live routes keep the same semantic baseline.

Learn accessibility
6:29 PM
Permissions
Read only
Edit
Admin

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.

Ready for an operational audience.

Locale, density, width, and motion preferences keep changing in real products. reopt keeps those settings near authoring and verification.

View recipes
Locale
Korean (South Korea)
Layout policy
densitywidthmotion

A role-based package catalog.

See each package's install command, docs entry point, and owned area in one place, then start with the role you need.

Open docs hub

  • opt-charts

    Visualization layer

    Specialist package for charts and data visualization — Recharts wrappers, heatmaps, funnels, and metric shells

    DocsExploreCanvas

  • opt-datagrid

    Data display specialist layer

    Keyboard-first editable data grid — virtualization, cell editing, and remote data sync

    DocsExplorePlayground

  • opt-editor

    Content editing specialist layer

    AI-first content editor — dual mode with visual WYSIWYG and an NDJSON StreamCompiler

    DocsExplorePlayground

  • opt-chat

    AI conversation interface layer

    Streaming AI chat interface built on the Vercel AI SDK — conversations, input, and 28 renderers

    DocsExplorePlayground

  • opt-shell

    Runtime frame

    Runtime product frame between opt-ui and product screens — workspaces, policies, adapters

    DocsExplore

  • opt-cli

    The harness

    The harness — verify product screens against their contract from the CLI

    DocsExplore

  • opt-devtool

    Dev tools layer

    Dev-only inspector overlay — runtime state visualization and a cross-module debug bridge

    DocsExplore

  • brandapp-ui

    UI integration layer

    brandapp-sdk × opt-ui copy-paste Surface blocks — install auth UI with a single `opt surface add`

    DocsExplore

v1.8.2 · 2026-06-22

opt-ui primitives/base-ui 정합성 패치와 Surface registry 38종 동기화, opt-editor 예제·roundtrip 안정화 릴리즈입니다.

Release notes