Row / Column

Stacks children horizontally (row) or vertically (column).

Usage

import { ui } from "@rezi-ui/core";

ui.row({ gap: 2 }, [ui.text("A"), ui.text("B")]);
ui.column({ gap: 1, p: 1 }, [ui.text("A"), ui.text("B")]);

Props

Prop	Type	Default	Description
id	string	-	Optional identity (not focusable)
key	string	-	Reconciliation key
gap	SpacingValue	-	Spacing between children
align	"start" \| "center" \| "end" \| "stretch"	"start"	Cross-axis alignment
justify	"start" \| "end" \| "center" \| "between" \| "around" \| "evenly"	"start"	Main-axis distribution
p, px, py, pt, pr, pb, pl	SpacingValue	-	Padding props
m, mx, my	SpacingValue	-	Margin props
width, height	number \| \"auto\" \| \"${number}%\"	-	Size constraints
minWidth, maxWidth, minHeight, maxHeight	number	-	Size bounds (cells)
flex	number	-	Main-axis flex in parent stack
aspectRatio	number	-	Enforce width/height ratio
style	TextStyle	-	Inherited style for children; bg fills rect

Examples

1) Spacer for “push to the right”

import { ui } from "@rezi-ui/core";

ui.row({ gap: 1 }, [
  ui.text("Left"),
  ui.spacer({ flex: 1 }),
  ui.text("Right"),
]);

2) Align + justify

import { ui } from "@rezi-ui/core";

ui.column({ height: 6, justify: "between" }, [
  ui.text("Top"),
  ui.row({ justify: "end" }, [ui.text("Bottom-right")]),
]);

Helpers

Rezi also includes:

• ui.hstack(...) — shorthand row with default gap: 1
• ui.vstack(...) — shorthand column with default gap: 1

Related

• Spacer - Flexible/fixed spacing
• Layout - Alignment, constraints, nesting