reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
Start
Overview
Start
Next.js 설치
Manual install
Core Concepts
아키텍처
Composition Patterns
Accessibility
디자인 규칙
Keyboard Patterns
Styling
로컬라이제이션
Theme System
Advanced Patterns
Build & Operate
Skills
AI Integration
CLI (opt surface add)
Dependency Graph
Canvas Catalog
Tools
Theme Builder
Form Builder
Templates
Templates
Releases
Release Notes
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Improve the customer experience with consistent component design.

Carry well-designed components into real screens by aligning flow, state, and information density. Customers can understand each screen quickly and use it comfortably, even as the product grows.

Design harnessThe agent contract

Interface Components

The core packages used directly in customer-facing screens: components, data grids, editors, and chat.

opt-ui

Core, Shells, Surfaces

Component selection, themes, accessibility, Surface and Template composition, and opt-ui adoption workflows.

Installation and themingComponent catalog and layersAccessibility, styling, and templates

opt-charts

Charts, Visuals, Metrics

Recharts-based charts, SVG visualizations, chart-specific shells, visualization metadata, and examples.

Installation and import boundariesChart catalog and specialized shellsChartContainer, Tooltip, and Legend

opt-datagrid

Editing, Scale, Remote Data

Editable grids, performance tuning, remote integration contracts, column models, and selection behavior.

Installation and the first gridEditing, operations, and large datasetsRemote protocols and backend contracts

opt-editor

Blocks, Streaming, AI Authoring

Block systems, streaming protocols, Markdown conversion, AI backend integration, and custom block extensions.

EditorProvider and quickstartFlat specs, catalogs, and block typesNDJSON streaming and AI integration

opt-chat

AI Chat, Streaming, Rich Parts

Chat components, message rendering, prompt input, and conversation state management.

Message rendering and streamingPrompt input and attachmentsConversation lists and sidebars

opt-deck

Slides, Editor, Viewer, json-render AI

Version 2 scene documents, canvas editing, presenting, exports, brand and customer variants, and AI change contracts. Host adapters connect persistence, assets, and model calls.

Embedding and controlled stateDocuments, transactions, brands, and variantsValidation and review of json-render AI proposals

opt-calendar

Events, Booking, Recurrence, AI Editing

CalendarSpec, recurrence and time zones, drag and resize interactions, booking lifecycles, streaming AI drafts, and remote window sources.

Calendar quickstartCalendarSpec, mutations, views, and engineRecurrence, time zones, booking, and AI streaming

opt-filemanager

File Browsing, Uploads, Connectors

Connector contracts and capability gates, mock and Brandapp connectors, folder navigation, upload queues, and file details.

FileManager composition and quickstartConnector contracts and capabilitiesMock latency, failures, and progress

Interface Frame

Assemble product screens while aligning state, adapters, and design standards so the customer experience stays steady.

opt-shell

Product Frame, State UX, Adapters

Structural consistency above opt-ui through app shells, page rhythm, state boundaries, and DataGrid and Editor adapters.

App shells and route groupsPage rhythm and content-width policiesLoading, empty, and error states

opt-cli

Surface CLI, Harness Checks

Harness contract validation, design-system, layer, and accessibility lint rules, completeness and coverage scoring, and SARIF output.

Harness check, doctor, and testDesign-system, layer, and accessibility rulesCompleteness, coverage, and SARIF

opt-devtool

Dev Overlay, Devtool Bridges

Development overlays, opt-ui debugger migration, DataGrid, Editor, and harness bridges, and cross-module inspection.

Global development overlay and hotkeyFocus, tab order, and spatial inspectionGrid, editor, and harness snapshot bridges

reopt Integration

Supports reopt brandapp-sdk integration. Quickly implement product blocks such as auth and account flows to complete operational workflows.

brandapp-ui

Copy-paste BrandApp Surfaces

Copyable Surfaces that compose Brandapp SDK features with opt-ui. Copy source into your project through opt block add and adapt it to your product.

Sign-in, user menus, protected views, and session expiryAI chat, image generation, and credit UIEAV tables and operations consoles