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

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

Explore/opt-shell/Flyout Aside
Layoutopt-shell example

Flyout Aside

ShellFlyoutAside로 상세 패널을 overlay/push 방식으로 열어 메인 화면 문맥을 유지한 채 부가 정보를 띄웁니다.

Context-preserving side panel for detail and inspector flows.

asideoverlayinspector
bun add @reopt-ai/opt-shell @reopt-ai/opt-ui
ShellProviderShellFlyoutAside
1024px

상세 정보

플라이아웃 패널 콘텐츠입니다.

Related Examples

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

Bottom Bar

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

stickybulk-actionsfooter
ShellProviderShellBottomBar
Open

Completeness Score

audit finding 수를 조절하면서 점수 변화를 확인하세요.

3/5
72/ 1007/10 passed
layout0%
recipe-contract67%
adapter-ownership100%
state-ux100%
design-document100%
scaffold-bundle100%
accessibility100%
Scoringopt-shell

Completeness Score

computeCompletenessScore로 audit finding을 7개 카테고리로 분류하고 0-100 가중 평균 점수를 산출합니다.

completenessscoreauditscoring
computeCompletenessScore
Open

Coverage Report

8개 라우트 파일 대비 하네스 rollout target 매칭 결과

75%6/8 covered
Recipe Breakdown
dashboard: 1list: 1detail: 1editor: 1fullscreen: 1
Uncovered Paths
  • app/settings/page.tsx
  • app/analytics/page.tsx
Scoringopt-shell

Coverage Report

computeShellCoverage로 라우트 파일 대비 하네스 채택률을 정적 분석하고 recipe별 breakdown과 미커버 경로를 표시합니다.

coverageroutesrolloutscoring
computeShellCoverage
Open
PreviousBottom BarNextDataGrid Adapter