Box

Generic layout wrapper for spacing, sizing, and surface styling on a single node.

Box is a theme-aware container for one element—like a <div> with optional token-based padding, margin, width, and extra CSS. Use it when a single wrapper needs spacing or sizing without distributing gaps between siblings. foreground sets theme text color — not the CSS color shorthand prop. For even gaps between children, prefer Stack or Flex.

  • One wrapper needs padding, margin, max-width, or surface styling
  • A card-like region without the full Material API
  • Custom layout chrome where Stack / Flex are too opinionated
  • Put content in the default slot.
  • Set typed padding, margin, background, radius, and related token props.
  • Pass additional rules through style when you need escape-hatch CSS.
  • Add utility classes through class when needed.
Default

A bordered box with sample text—the quickest way to see the container bounds.

This Box wraps content with theme-aware spacing and stroke tokens.
Padding

The padding prop adds inner space without extra wrapper markup.

Extra padding keeps content away from the dashed border.
Margin

The margin prop offsets the box from surrounding layout—visible against a tinted backdrop.

Margin pushes this box away from the outer frame.
Width

Constrain width on forms, side panels, and compact callouts.

A fixed width keeps this callout readable in wide layouts.
Surface styling

Combine typed surface props for a subtle raised panel.

Surface tokens give the box a resting elevation on the page canvas.