reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

Explore/opt-shell/List Workspace
Workspaceopt-shell 예제

List Workspace

ListWorkspace에 toolbar와 section body를 얹어 목록형 운영 화면의 기본 리듬을 보여줍니다.

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

listworkspacetoolbar
bun add @reopt-ai/opt-shell @reopt-ai/opt-ui
ShellProviderListWorkspaceShellSection
1024px

파이프라인

전체 파이프라인 목록

  • ETL Pipeline Arunning
  • Data Sync Bidle
  • Transform Cfailed

관련 예제

대시보드

파이프라인 상태 요약

메트릭

활성: 24
실패: 3
사이드 패널
Workspaceopt-shell

Dashboard Workspace

DashboardWorkspace와 ShellSection으로 상단 헤더, 메트릭 카드, 사이드 패널이 있는 기본 운영 화면을 구성합니다.

dashboardworkspaceshell
ShellProviderDashboardWorkspaceShellSection
열기

Portfolio records

A production-style records workspace that connects filters, portfolio rows, and dossier navigation.

Portfolio table

The grid stays editable while filters, status, and footer remain part of the app workflow.

Revenue portfolio

Showing 5 records with renewal timing and health status.

Apollo Ledger
Jiwoo Han
At risk
14 days
Northstar Renewal
Mina Park
Healthy
37 days
Atlas Claims
Daniel Kim
Expansion
63 days
Meridian Onboarding
Sena Yoon
At risk
21 days
Delta Risk
Chris Lee
Healthy
52 days
5 records · No filterRecommended next step: open an at-risk dossier.
Quick-open dossiers
3 shown
Apollo Ledger
At risk
Jiwoo Han · 14 days
Dossier snapshot
Northstar Renewal
Healthy
Mina Park · 37 days
Dossier snapshot
Atlas Claims
Expansion
Daniel Kim · 63 days
Dossier snapshot
5 of 5 records visibleDataGrid engine with an app-owned workflow frame.
Adapteropt-shell

DataGrid Adapter

ListWorkspace 안에서 ShellDataGridAdapter가 toolbar, status, footer chrome을 소유하면서 opt-datagrid 엔진을 유지합니다.

datagridadapterworkspace
ShellProviderListWorkspaceShellDataGridAdapter
열기
스크롤 가능한 콘텐츠 영역
3개 항목 선택됨
Layoutopt-shell

Bottom Bar

ShellBottomBar로 선택 액션과 승인 액션을 화면 하단에 sticky하게 붙여 작업 맥락을 유지합니다.

stickybulk-actionsfooter
ShellProviderShellBottomBar
열기
이전Dashboard Workspace다음Landing Page