Widgets
Box
Draws a container (optionally bordered) and lays out its children inside a padded content area.
Draws a container (optionally bordered) and lays out its children inside a padded content area.
Usage
import { ui } from "@rezi-ui/core";
ui.box({ title: "Settings", border: "rounded", p: 1 }, [
ui.text("Hello"),
]);Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Optional identity (not focusable) |
key | string | - | Reconciliation key |
title | string | - | Optional title rendered in the top border |
titleAlign | "left" | "center" | "right" | "left" | Title alignment |
border | "none" | "single" | "double" | "rounded" | "heavy" | "dashed" | "heavy-dashed" | "single" | Border style |
shadow | boolean | { offsetX?: number; offsetY?: number; density?: \"light\" | \"medium\" | \"dense\" } | - | Shadow effect for depth |
style | TextStyle | - | Style applied to the box surface (bg fills the rect) |
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 stacks |
aspectRatio | number | - | Enforce width/height ratio |
Examples
1) Card-like panel with background
import { ui, rgb } from "@rezi-ui/core";
ui.box({ border: "rounded", p: 1, style: { bg: rgb(18, 18, 24) } }, [
ui.text("Card title", { style: { bold: true } }),
ui.text("Body text"),
]);2) Sidebar + content layout
import { ui } from "@rezi-ui/core";
ui.row({ gap: 1 }, [
ui.box({ width: 24, border: "single", p: 1, title: "Sidebar" }, [
ui.column({ gap: 1 }, [ui.text("One"), ui.text("Two")]),
]),
ui.box({ flex: 1, border: "single", p: 1, title: "Content" }, [
ui.text("Main area"),
]),
]);Notes
- Borders consume 1 cell on each edge (unless
border: "none"). - Padding is applied inside the border and reduces child content area.
Related
- Layout - Borders, padding, nesting
- Row / Column - Stack layouts