Box

Generic container element. Internally uses flex direction=column.

Props

Box Model

Prop	Type	Description
width	number	Width (px)
height	number	Height (px)
minWidth / maxWidth	number	Width constraints (px)
minHeight / maxHeight	number	Height constraints (px)
aspectRatio	number	Aspect ratio (w / h)
padding	number | [T, R, B, L]	Padding
margin	number | [T, R, B, L]	Margin

INFO

padding and margin accept either a single number (applied to all sides) or a 4-element array [top, right, bottom, left]. 2 or 3 element shorthand is not supported.

Visual

Prop	Type	Description
background	string	Background color
boxShadow	string	Box shadow (e.g. "0 4 8 0 rgba(0,0,0,0.2)")
borderWidth	number	Border width
borderColor	string	Border color
strokeScaling	"transform" | "canvas"	Border width space. "transform" (default) scales with post-layout transforms; "canvas" keeps the width stable in canvas space
borderRadius	number | [number, number, number, number]	Border radius
strokeLinecap	"butt" | "round" | "square"	Border stroke line cap
strokeLinejoin	"miter" | "round" | "bevel"	Border stroke line join
strokeDasharray	string	Border stroke dash pattern (e.g. "5,5")
strokeMiterlimit	number	Border stroke miter limit
overflow	"visible" | "clip"	Child paint: "clip" uses the layout box and resolved borderRadius; "visible" leaves children unclipped
opacity	number	Opacity (0–1)
zIndex	number	Sibling-local paint order (integer; higher paints later)
meta	Record<string, string>	Metadata emitted as data-boundsvg-meta-* attributes and into the layered manifest (max 16 keys, [a-z][a-z0-9-]{0,31} keys, 256-char values)
transform	Transform2D	Static post-layout paint transform
animate	AnimationSpec	Declarative opacity/transform track; see Animation

With overflow="clip", the clipping boundary also cuts the Box's own border and shadow at its rounded corners.

The same explicit rectangular or rounded clip excludes pointer hits on the Box and its descendants outside that boundary. overflow="visible" does not exclude child hits merely because the background has rounded corners.

Positioning

Prop	Type	Default	Description
position	"relative" | "absolute"	"relative"	Positioning mode
top	number	—	Top offset in px
right	number	—	Right offset in px
bottom	number	—	Bottom offset in px
left	number	—	Left offset in px

Grid Item

Prop	Type	Description
gridColumn	string	Grid column placement (e.g. "1 / 3")
gridRow	string	Grid row placement (e.g. "1 / 2")

Event / Identity

Prop	Type	Description
onClick	string	Click handler reference
onDoubleClick	string	Double-click handler reference
onContextMenu	string	Context menu handler reference
onPointerMove	string	Pointer move handler reference
onPointerEnter	string	Pointer enter handler reference
onPointerLeave	string	Pointer leave handler reference
id	string	Stable NodeId for hit-testing
layer	string	Layer id for Layered Export

All 21 event handler props are supported. See Event Handlers for the full list.

INFO

transform is applied after layout and text fitting. It does not change the node's layout box or its siblings' placement.

INFO

Set strokeScaling="canvas" on a solid border used inside a similarity camera transform to keep its canvas-space width stable while the camera zooms. The default "transform" preserves the normal SVG behavior. Canvas-stable borders do not support dash patterns, non-uniform scale, or axis reflection; see Known Limitations.

Example

<Canvas width={300} height={140} background="#f8fafc">
  <Flex
    direction="column"
    justifyContent="center"
    alignItems="center"
    width={300}
    height={140}
  >
    <Box
      width={200}
      height={80}
      padding={16}
      background="#e2e8f0"
      borderWidth={2}
      borderColor="#64748b"
      borderRadius={8}
    >
      <Text font="NotoSansJP" fontSizePx={16} color="#334155">
        Styled Box
      </Text>
    </Box>
  </Flex>
</Canvas>

Generated SVG

<svg xmlns="http://www.w3.org/2000/svg" data-boundsvg-node-id="auto:0" viewBox="0 0 300 140" width="300" height="140">
  <rect x="0" y="0" width="300" height="140" fill="#f8fafc"/>
  <g data-boundsvg-node-id="auto:0.0">
    <g data-boundsvg-node-id="auto:0.0.0">
      <rect x="50" y="30" width="200" height="80" rx="8" ry="8" fill="#e2e8f0"/>
      <rect x="50" y="30" width="200" height="80" rx="8" ry="8" fill="none" stroke="#64748b" stroke-width="2"/>
      <g data-boundsvg-node-id="auto:0.0.0.0">
        <g data-boundsvg-node-id="auto:0.0.0.0" data-boundsvg-text="Styled Box" aria-label="Styled Box">
          <path d="M70.86 61.89q-1.24 0-2.29-.47-1.05-.46-1.8-1.26l.88-1.02q.62.65 1.47 1.05t1.76.4q1.17 0 1.82-.53.64-.52.64-1.37q0-.63-.26-.99-.26-.37-.7-.62t-1-.49l-1.68-.73q-.55-.24-1.1-.61t-.92-.96-.37-1.44q0-.91.48-1.61t1.31-1.1q.84-.4 1.91-.4q1.05 0 1.94.4t1.5 1.04l-.77.95q-.54-.5-1.19-.79-.65-.3-1.48-.3-.99 0-1.59.46-.6.45-.6 1.24q0 .57.29.94.3.37.75.59.44.23.91.43l1.66.72q.67.29 1.23.69.55.4.87.99.32.6.32 1.46q0 .93-.48 1.69t-1.38 1.2q-.89.44-2.13.44zM79.26 61.89q-.91 0-1.45-.36-.55-.36-.78-1.02-.23-.65-.23-1.52V54.18H75.5V53.07l1.38-.08.16-2.45h1.22v2.45h2.36v1.19H78.26v4.86q0 .78.29 1.22.3.44 1.05.44.24 0 .51-.07t.48-.17l.29 1.11q-.37.13-.78.22-.42.1-.84.1zM82.72 65.42q-.3 0-.56-.04-.26-.05-.46-.13l.28-1.17q.13.05.31.1.17.04.37.04.73 0 1.2-.53.48-.54.75-1.34l.19-.65-3.49-8.71h1.52l1.76 4.82q.21.57.43 1.21.21.64.44 1.25h.08q.17-.61.36-1.24.18-.63.34-1.22l1.57-4.82h1.42l-3.26 9.43q-.31.84-.74 1.52t-1.04 1.08-1.47.4zM92.45 61.89q-.55 0-.88-.23-.34-.22-.5-.66t-.16-1.05V48.94h1.47V60.05q0 .33.12.48.12.14.28.14.07 0 .13-.01.07 0 .18-.02l.21 1.12q-.16.05-.36.09-.19.04-.49.04zM98.98 61.89q-1.17 0-2.12-.55-.94-.54-1.49-1.56-.55-1.01-.55-2.44q0-1.07.32-1.91t.87-1.44t1.25-.91q.71-.31 1.44-.31q1.12 0 1.89.49.77.5 1.18 1.42t.41 2.17q0 .24-.02.45-.02.2-.05.38H96.26q.04.93.42 1.61t1 1.05q.62.38 1.46.38.64 0 1.16-.18.52-.19 1.01-.51l.51.98q-.56.37-1.26.62-.7.26-1.58.26zM96.24 56.64h4.66q0-1.31-.57-2.01-.57-.69-1.59-.69-.61 0-1.15.32-.53.32-.89.91t-.46 1.47zM107.28 61.89q-1.09 0-1.9-.53-.8-.53-1.24-1.54-.44-1.02-.44-2.48q0-1.4.52-2.43.53-1.02 1.39-1.58.85-.56 1.85-.56.76 0 1.32.26.55.27 1.12.75l-.08-1.49V48.94h1.48V61.68h-1.2l-.13-1.02h-.05q-.51.51-1.18.87-.68.36-1.46.36zM107.6 60.66q.61 0 1.15-.3.55-.3 1.07-.89V54.91q-.54-.49-1.05-.7T107.71 54q-.69 0-1.25.42-.57.43-.92 1.17-.34.75-.34 1.74q0 1.04.29 1.79t.82 1.14q.54.4 1.29.4zM117.97 61.68V49.95h3.47q1.2 0 2.1.29.91.29 1.42.91.51.63.51 1.67q0 .57-.2 1.09t-.58.9q-.39.37-.93.55v.08q1.04.19 1.71.9.67.7.67 1.9q0 1.15-.56 1.91-.57.76-1.57 1.15-1 .38-2.31.38zM119.44 54.93h1.74q1.52 0 2.18-.51.66-.52.66-1.41q0-1.04-.7-1.47-.7-.42-2.07-.42h-1.81zM119.44 60.5h2.05q1.5 0 2.35-.56t.85-1.75q0-1.1-.83-1.61-.84-.5-2.37-.5h-2.05zM131.71 61.89q-1.05 0-1.98-.54-.93-.53-1.48-1.55t-.55-2.46q0-1.45.55-2.47.55-1.01 1.48-1.56.93-.54 1.98-.54.8 0 1.53.3.73.31 1.29.9t.88 1.44.32 1.93q0 1.44-.56 2.46t-1.47 1.55q-.92.54-1.99.54zM131.71 60.67q.75 0 1.32-.41.57-.42.89-1.17t.32-1.75-.32-1.76q-.32-.75-.89-1.16-.57-.42-1.32-.42t-1.32.42q-.57.41-.88 1.16-.31.76-.31 1.76t.31 1.75.88 1.17q.57.41 1.32.41zM136.45 61.68l2.86-4.53-2.64-4.16h1.59l1.16 1.91q.2.36.41.72.22.36.44.73h.08q.18-.37.38-.73t.39-.72l1.07-1.91h1.52l-2.64 4.31l2.87 4.38h-1.6l-1.28-2.03q-.23-.4-.46-.79-.23-.4-.49-.76h-.08q-.21.36-.42.76-.22.39-.46.79l-1.17 2.03z" fill="#334155"/>
        </g>
      </g>
    </g>
  </g>
</svg>