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

Workspaceopt-shell example

List Workspace

List recipe with header, toolbar, and section-based content body.

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

APIs used

ShellProviderListWorkspaceShellSection

Live preview

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

1024px

파이프라인

전체 파이프라인 목록
  • ETL Pipeline Arunning
  • Data Sync Bidle
  • Transform Cfailed

Install and import

Related docs

Install

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

Import

import { ShellProvider, ListWorkspace, ShellSection } from "@reopt-ai/opt-shell";

Related Examples

opt-shell

Dashboard Workspace

Examples

Starter dashboard recipe with workspace chrome and section framing.

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.

PreviousDashboard WorkspaceNextLanding Page