Design System/Designer/Shell

Shell

Engine-agnostic editor chrome with header, sidebar, toolbars, and contextual panels for authoring workflows.

When To Use

  • Use Shell when you need a composed screen-level pattern and want the structural decisions made before you tune the visuals.
  • Start from the example whose layout and information hierarchy already match the workflow you are building.
  • Review the examples below to compare density, framing, and emphasis before copying one into production code.

When Not To Use

  • Do not use Shell when the page structure is still exploratory; start with smaller primitives if the workflow is not stable yet.
  • Do not copy a full-screen pattern unchanged when only one fragment of the layout is relevant to the task.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Key building blocks

DesignerShell, DesignerHeader, DesignerSidebar, DesignerPanel, DesignerPane, DesignerPaneTitle

H
Untitled design/Demo workspace
Edited just now
Canvas surface