Box
A flexible container component that can render as any HTML element or React component. Supports all styled system props for consistent spacing, layout, and styling.
AI Tip Want to skip the docs? Use the MCP Server
Best Practices
The Box component should not be used in place of standard HTML elements. Use Div or Span directly for that purpose. Box is meant to provide styled system properties to components that already accept style and className, such as third-party components.
Box should:
- Be used to augment components (often third-party) with layout/spacing/visual props when those components accept
className/style. - Keep the DOM semantic: always prefer the correct native element, or use
htmlElement()function for missing tags, instead of forcingBox. - Use the
asprop sparingly, and typically only to target non-native components (e.g.,as={RACButton}) or in rare conditional cases where semantics truly change. - Avoid introducing conflicting layout: prefer composing spacing on the outermost appropriate element.
Do's and Don'ts
Do
Use Box to add spacing/layout to a third-party component that accepts className/style
Don't
Use Box as a generic <Inline> or <Stack> substitute
Do
Create missing HTML elements with htmlElement() (e.g., IFrame) and use them directly
Don't
Render missing HTML tags via Box (e.g., <Box as='iframe'>)
Do
Use the 'as' prop to flip between components
Don't
Wrap everything in Box or use it to override intrinsic spacing/styles of the child component
Props
as?
The element type to render as.
Defaults to div.