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/Navigation Shell
Navigationopt-shell 예제

Navigation Shell

ShellCollapsibleNav, ShellNavItem, ShellNavAccordion 조합으로 접히는 product nav를 구성합니다.

Collapsible product navigation with groups, badges, and nested accordions.

navsidebarcollapsible
bun add @reopt-ai/opt-shell @reopt-ai/opt-ui
ShellProviderShellCollapsibleNavShellNavItemShellNavGroupShellNavAccordion
1024px
active: dashboard
Overview
Data

관련 예제

스크롤 가능한 콘텐츠 영역
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
열기
이전Policy Toggler다음Bottom Bar