Layout Components

Layout components arrange other components. Layout nodes accept nested host components in their children arrays; components such as Table have specific child requirements. AI builder proposals are limited to six component levels including the root.

Box, Col, Row

Box, Col, and Row all render as a flex container; Row lays children out horizontally, Box and Col lay children out vertically.

Prop	Type	Default	Description
gap	number	8	Gap between children, in px.
padding	number	0	Padding on all sides, in px.
justify	"start" | "center" | "end" | "between" | "around"	"start"	justify-content.
align	"start" | "center" | "end" | "stretch"	unset	align-items.
width	number | string	—	A non-negative number (px), or a length such as "100%", "320px", "20rem", "10em", "1fr", or "auto". Any other value (including calc(), var(), and keywords like fit-content) is rejected by validation and ignored when rendered.

{
  "component": "Row",
  "props": { "justify": "between", "align": "center" },
  "children": [
    { "component": "Title", "props": { "value": "Order #1042" } },
    { "component": "Badge", "props": { "label": "Shipped", "color": "success" } }
  ]
}

Card

Card renders a padded, bordered, rounded container — use it to group a section of content.

Prop	Type	Default	Description
padding	number	16	Padding on all sides, in px.

Card children stack vertically with an 8px gap, the same as Col.

Spacer

Spacer expands to fill available room inside a Row or Col, pushing its siblings apart — for example, a header's title on the left and an action button on the right.

Prop	Type	Description
minSize	number | string	Minimum size the spacer never shrinks below: a non-negative number (px), or a length such as "24px", "50%", "2rem", "1.5em", "1fr", or "auto". Any other value is rejected by validation and ignored when rendered.

Divider

Divider renders a horizontal rule that separates sections inside a Col.

Prop	Type	Default	Description
spacing	number	8	Vertical space above/below the line, in finite nonnegative px.
color	string	#e5e7eb	A hex color (#rgb, #rrggbb, with optional alpha), an rgb()/rgba()/hsl()/hsla() color, or a theme token: primary, secondary, success, danger, warning, info, discovery. Named colors, var(), and other CSS are rejected by validation, and rendering falls back to the default.
size	number	1	Line thickness, in finite nonnegative px. Zero hides the line.
flush	boolean	false	Add 32px of width with -16px side margins, matching a card's default 16px padding. Custom card padding needs separate layout adjustment.

Note on ListView / ListViewItem

ListView and ListViewItem are structurally identical to Box/Col (a vertical flex container with the same gap/padding/justify/align/width props, including the width value rules above) but are documented under Data Display since they're intended for rendering a list of records rather than generic layout.