Deprecated component
Workbench component has been deprecated and is not supported or recommended for use.
Workbench
Workbench
The Workbench component is deprecated in version 5 and will be replaced by the Layout component. This guide will help you migrate your usage of Workbench to the updated Layout component.
The Workbench package will no longer receive updates. Please migrate to Layout as soon as possible for continued support and improvements.
Why migrate?
Layoutoffers a more flexible, modern, and composable API.- Improved support for responsive design and accessibility.
- Consistent API with other Forma 36 components.
Key Differences
LayoutreplacesWorkbenchand its compound components (WorkbenchHeader,WorkbenchSidebar,WorkbenchContent).- The API and prop names may differ.
Layoutsupports left and right sidebars, header, and content via dedicated props.
Prop Mapping Table
| Workbench Prop/Component | Layout Prop/Component | Notes |
|---|---|---|
<Workbench> | <Layout> | Main container |
<WorkbenchHeader> | <Layout.Header> supplied to header prop | Header area, use Header as child |
<WorkbenchSidebar> | <Layout.Sidebar> supplied to leftSidebar or rightSidebar props | Use leftSidebarVariant or rightSidebarVariant to adjust width of the Sidebar |
<WorkbenchContent> | children wrapped in <Layout.Body> | Main content area |
className, testId | className, testId | Supported on both |
| (no direct equivalent) | variant, withBoxShadow, offsetTop | New features in Layout |
Checkout detailed documentation and learn how to migrate your workbench to the new Layout component.
Additional Notes
Layout supports both left and right sidebars. Use leftSidebar or rightSidebar.
For advanced use cases, refer to the Layout examples and documentation.
If you used custom props or patterns with Workbench, check the Layout API for equivalent or improved options.