Skip to main content

​
Overview

Row and Column are flex-based stack layout widgets that arrange children horizontally or vertically. They support gap, alignment, justification, and wrapping.

​
Basic Usage

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

// Horizontal row
ui.row({ gap: 1 }, [
  ui.text('Item 1'),
  ui.text('Item 2'),
  ui.text('Item 3')
])

// Vertical column
ui.column({ gap: 1 }, [
  ui.text('Line 1'),
  ui.text('Line 2'),
  ui.text('Line 3')
])

// Centered row
ui.row({ gap: 1, items: 'center', justify: 'center' }, [
  ui.button('ok', 'OK'),
  ui.button('cancel', 'Cancel')
])

​
Row Props

Row arranges children horizontally (left to right by default).
​
gap
SpacingValue
default:"0"
Gap between children. Accepts number (cells) or spacing key ("xs", "sm", "md", "lg", "xl", "2xl").
​
items
AlignItems
default:"'start'"
Cross-axis (vertical) alignment of children.
  • "start" - Align to top
  • "end" - Align to bottom
  • "center" - Center vertically
  • "stretch" - Stretch to fill height
​
justify
JustifyContent
default:"'start'"
Main-axis (horizontal) justification of children.
  • "start" - Pack to left
  • "end" - Pack to right
  • "center" - Center horizontally
  • "between" - Space between items
  • "around" - Space around items
  • "evenly" - Equal space distribution
​
wrap
boolean
default:"false"
Enable line wrapping when children exceed available width.
​
reverse
boolean
default:"false"
Render children in reverse order (right to left).
​
p
SpacingValue
Padding on all sides.
​
px
SpacingValue
Horizontal padding.
​
py
SpacingValue
Vertical padding.
​
pt
SpacingValue
Top padding.
​
pr
SpacingValue
Right padding.
​
pb
SpacingValue
Bottom padding.
​
pl
SpacingValue
Left padding.
​
style
TextStyle
Style applied to the row surface. When bg is provided, the renderer fills the row rect.
​
inheritStyle
TextStyle
Style inherited by descendants when they do not override their own style.
​
overflow
'visible' | 'hidden' | 'scroll'
default:"'visible'"
Child overflow behavior.
​
scrollX
number
Horizontal scroll offset in cells.
​
scrollY
number
Vertical scroll offset in cells.
​
theme
ScopedThemeOverride
Optional scoped theme override for this container subtree.
​
transition
TransitionSpec
Optional declarative transition settings.
​
exitTransition
TransitionSpec
Optional declarative exit transition.
​
id
string
Optional unique identifier.
​
key
string
Optional reconciliation key.

​
Layout Constraints

Row also accepts layout constraint props like width, height, flex, minWidth, maxWidth, etc.

​
Column Props

Column arranges children vertically (top to bottom by default). It accepts the same props as Row, with cross-axis and main-axis swapped:
  • items controls horizontal (cross-axis) alignment
  • justify controls vertical (main-axis) justification
  • wrap enables wrapping to new columns when height is exceeded

​
Stack Helpers

Rezi provides convenience functions for common stack patterns: 
// Vertical stack with default gap
ui.vstack([ui.text('A'), ui.text('B'), ui.text('C')])
// Equivalent to: ui.column({ gap: 1 }, [...])

// Horizontal stack with default gap
ui.hstack([ui.text('A'), ui.text('B'), ui.text('C')])
// Equivalent to: ui.row({ gap: 1 }, [...])

// Vertical stack with custom gap
ui.vstack(2, [ui.text('A'), ui.text('B'), ui.text('C')])

// Horizontal stack with custom gap
ui.hstack(2, [ui.text('A'), ui.text('B'), ui.text('C')])

​
Alignment Examples

​
Horizontal Alignment (Row)

// Left-aligned (default)
ui.row({ gap: 1, justify: 'start' }, [
  ui.button('a', 'A'),
  ui.button('b', 'B')
])

// Right-aligned
ui.row({ gap: 1, justify: 'end' }, [
  ui.button('a', 'A'),
  ui.button('b', 'B')
])

// Centered
ui.row({ gap: 1, justify: 'center' }, [
  ui.button('a', 'A'),
  ui.button('b', 'B')
])

// Space between
ui.row({ gap: 0, justify: 'between', width: '100%' }, [
  ui.text('Left'),
  ui.text('Right')
])

​
Vertical Alignment (Row)

// Top-aligned (default)
ui.row({ gap: 1, items: 'start' }, [
  ui.text('Short'),
  ui.box({ height: 5 }, [ui.text('Tall')])
])

// Bottom-aligned
ui.row({ gap: 1, items: 'end' }, [
  ui.text('Short'),
  ui.box({ height: 5 }, [ui.text('Tall')])
])

// Center-aligned
ui.row({ gap: 1, items: 'center' }, [
  ui.text('Short'),
  ui.box({ height: 5 }, [ui.text('Tall')])
])

// Stretched to equal height
ui.row({ gap: 1, items: 'stretch' }, [
  ui.box({ flex: 1 }, [ui.text('A')]),
  ui.box({ flex: 1 }, [ui.text('B')])
])

​
Column Alignment

// Horizontally centered
ui.column({ gap: 1, items: 'center' }, [
  ui.text('Short'),
  ui.text('Longer text line')
])

// Vertically centered
ui.column({ gap: 1, height: 20, justify: 'center' }, [
  ui.text('Centered'),
  ui.text('Content')
])

// Stretched to equal width
ui.column({ gap: 1, items: 'stretch' }, [
  ui.box({ border: 'single' }, [ui.text('A')]),
  ui.box({ border: 'single' }, [ui.text('B')])
])

​
Wrapping

Enable wrapping for responsive layouts: 
// Wrap to new lines
ui.row({ gap: 1, wrap: true }, [
  ui.button('btn1', 'Button 1'),
  ui.button('btn2', 'Button 2'),
  ui.button('btn3', 'Button 3'),
  ui.button('btn4', 'Button 4'),
  ui.button('btn5', 'Button 5')
])

// Wrap to new columns
ui.column({ gap: 1, wrap: true, maxHeight: 10 }, [
  ui.text('Item 1'),
  ui.text('Item 2'),
  ui.text('Item 3'),
  ui.text('Item 4')
])

​
Flex Layout

Use flex properties for flexible sizing: 
// Flexible children
ui.row({ gap: 1, width: '100%' }, [
  ui.box({ flex: 1, border: 'single' }, [ui.text('Flex 1')]),
  ui.box({ flex: 2, border: 'single' }, [ui.text('Flex 2')]),
  ui.box({ flex: 1, border: 'single' }, [ui.text('Flex 1')])
])
// Second box takes twice as much space

// Mixed fixed and flexible
ui.row({ gap: 1, width: '100%' }, [
  ui.box({ width: 20, border: 'single' }, [ui.text('Fixed 20')]),
  ui.box({ flex: 1, border: 'single' }, [ui.text('Flexible')]),
  ui.box({ width: 15, border: 'single' }, [ui.text('Fixed 15')])
])

​
Reverse Order

// Right-to-left row
ui.row({ gap: 1, reverse: true }, [
  ui.text('First'),
  ui.text('Second'),
  ui.text('Third')
])
// Renders: "Third Second First"

// Bottom-to-top column
ui.column({ gap: 1, reverse: true }, [
  ui.text('Top'),
  ui.text('Middle'),
  ui.text('Bottom')
])
// Renders: "Bottom Middle Top"

​
Common Patterns

​
Button Group

ui.row({ gap: 1, justify: 'end' }, [
  ui.button('cancel', 'Cancel'),
  ui.button('save', 'Save', { intent: 'primary' })
])

​
Form Layout

ui.column({ gap: 1 }, [
  ui.row({ gap: 1, items: 'center' }, [
    ui.text('Name:', { width: 15 }),
    ui.input('name', state.name)
  ]),
  ui.row({ gap: 1, items: 'center' }, [
    ui.text('Email:', { width: 15 }),
    ui.input('email', state.email)
  ])
])

​
Header with Actions

ui.row({ gap: 1, items: 'center', justify: 'between', width: '100%' }, [
  ui.text('Page Title', { variant: 'heading' }),
  ui.row({ gap: 1 }, [
    ui.button('refresh', 'Refresh'),
    ui.button('settings', 'Settings')
  ])
])

ui.row({ gap: 1, items: 'stretch', height: '100%' }, [
  ui.box({ width: 30, border: 'rounded' }, [ui.text('Sidebar')]),
  ui.box({ flex: 1, border: 'rounded' }, [ui.text('Main Content')])
])

​
Evenly Spaced Items

ui.row({ gap: 0, justify: 'evenly', width: '100%' }, [
  ui.text('⬅️'),
  ui.text('Page 1 of 10'),
  ui.text('➡️')
])

​
Status Bar

ui.row({ gap: 1, items: 'center', width: '100%', p: 1 }, [
  ui.text('Ready'),
  ui.spacer({ flex: 1 }),
  ui.text('Line 42:12'),
  ui.text('UTF-8'),
  ui.text('TypeScript')
])
  • Box - Container with borders and padding
  • Spacer - Flexible spacing element
  • Grid - Two-dimensional grid layout
  • Split Pane - Resizable split layouts

Build docs developers (and LLMs) love

Get started for freeTalk to us