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
as
prop 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.