reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
reopt designreopt design

A design system for the AI era

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

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/opt-shell/Policy Toggler
Policyopt-shell example

Policy Toggler

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
Text Size
Motion
Navigation
Sidebar
Shortcut Hints

variant="compact"

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

Related Examples

opt-shell

Bottom Bar

opt-shell - Layout

Examples
ShellProviderShellBottomBar
opt-shell

Completeness Score

opt-shell - Scoring

Examples
computeCompletenessScore
opt-shell

Coverage Report

opt-shell - Scoring

Examples
computeShellCoverage
PreviousState BoundaryNextNavigation Shell