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

WorkflowCanvas

Shell

Arrange workflow steps on grid cells with SVG connections and keyboard movement.

workflow
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { WorkflowCanvas } from "@reopt-ai/opt-ui";

Live preview

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

100%

기본 사용

Order Fulfillment

okdone

WorkflowCanvas

PropTypeDefaultDescription
stepsRequiredWorkflowCanvasStep[]—스텝 배열. { id, title, row, col, status? }
connectionsWorkflowCanvasConnection[][]연결선 배열. { from, to, label? }
onStepMove(stepId: string, row: number, col: number) => void—화살표 키 이동 핸들러
onSelectStep(step: WorkflowCanvasStep) => void—스텝 선택 핸들러

컴포넌트 의존 관계

깊이
▼ USES (1)WorkflowCanvasbadge
View test results

테스트 커버리지

2026년 7월 9일2/2 통과
2성공
0실패
2전체
  • 그리드와 스텝을 렌더링한다
  • onSelectStep 콜백을 호출한다

키보드 동작

키동작
↑ ↓ ← →선택 스텝 이동 (onStepMove 제공 시)
Enter스텝 선택

Related components

opt-ui

DeploymentTimeline

Shells

Follow deployment stages on a timeline with Composite keyboard navigation.

opt-ui

TaskList

Shells

Manage tasks with priorities, statuses, assignees, tags, and subtasks.

opt-ui

ActivityFeed

Shells

Read activity and logs in a timeline with relative timestamps.

opt-ui

FeatureFlagPanel

Shells

Manage feature toggles, environment badges, and rollout percentages.

opt-ui

AuditLog

Shells

Read audit events in a timeline with avatars, action text, and metadata badges.

opt-ui

AuditTimeline

Shells

Review change history with action colors and expandable diffs.

PreviousKeyValueEditorNextCodeSnippetViewer