reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-shell14
Editor Adapter
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.

Adapteropt-shell example

Editor Adapter

Own the authoring shell while opt-editor remains the document engine.

editoradapterauthoring
bun add @reopt-ai/opt-shell @reopt-ai/opt-editor @reopt-ai/opt-ui

APIs used

ShellProviderEditorWorkspaceShellEditorAdapter

Live preview

Change the width and theme, then interact with the components.

1024px

Compose memo

A focused authoring workspace with toolbar, status, inspector, and review handoff kept in one route.
Open review surface

Expansion memo draft

The editor is fixture-backed so the page stays deterministic, but it still behaves like a real authoring surface.

Fixture-backed
6 blocksVersion 3Review note pending

ℹ️

Publish checklist
2 of 3
Distribution
PrimaryCommercial committee memo
SecondaryRenewal review packet
Autosave rehearsal completed 09:16 KSTNext action: review the fullscreen surface pattern

Install and import

Related docs

Install

bun add @reopt-ai/opt-shell @reopt-ai/opt-editor @reopt-ai/opt-ui

Import

import { ShellProvider, EditorWorkspace } from "@reopt-ai/opt-shell";
import { ShellEditorAdapter } from "@reopt-ai/opt-shell/editor";

Related Examples

opt-shell

DataGrid Adapter

Examples

Bridge opt-datagrid into harness chrome without replacing the engine.

opt-shell

Bottom Bar

Examples

Sticky bottom action bar for bulk actions and commit flows.

opt-shell

Completeness Score

Examples

Score harness compliance across layout, recipe, adapter, state, design, scaffold, and a11y categories.

PreviousDataGrid AdapterNextFullscreen Review