DesignerPane.showFor
Click below to "select" different kinds. The properties panel on the right rerenders only the panes whose showFor predicate matches. The shell itself doesn't know about layer kinds — apps wire a resolveKind function on ShellContext.
When To Use
- Use DesignerPane.showFor 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 DesignerPane.showFor 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
DesignerPane, DesignerPaneTitle, DesignerPaneContent, DesignerPanel, ShellProvider, Badge
Click to select