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/Policy Toggler
Policyopt-shell 예제

Policy Toggler

ShellPolicyToggler로 density, width, navigation mode 같은 정책을 화면에서 직접 조정합니다.

Interactive policy controls for density, width, motion, and navigation.

policydensitynavigation
bun add @reopt-ai/opt-shell @reopt-ai/opt-ui
ShellPolicyTogglerresolveShellPolicy
1024px

variant="panel"

Policy Controls

Density
Content Width
Motion
Navigation

variant="compact"

{
  "density": "comfortable",
  "contentWidth": "wide",
  "motionPolicy": "reduced",
  "navigationMode": "sidebar"
}

관련 예제

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

Bottom Bar

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

stickybulk-actionsfooter
ShellProviderShellBottomBar
열기

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
열기

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
열기
이전State Boundary다음Navigation Shell