Skip to main content

​
Common Layout Props

Box, Col, and Row all share the following props for controlling spacing, sizing, and alignment.
PropTypeDescription
paddingspacingInner spacing.
borderborderBorder width, color, and style.
radiusradiusCorner rounding.
backgroundcolorBackground color.
widthnumber | stringExplicit width.
heightnumber | stringExplicit height.
minWidthnumber | stringMinimum width constraint.
maxWidthnumber | stringMaximum width constraint.
minHeightnumber | stringMinimum height constraint.
maxHeightnumber | stringMaximum height constraint.
gapnumber | stringSpacing between children.
alignstart | center | end | baseline | stretchCross-axis alignment.
justifystart | center | end | between | around | evenly | stretchMain-axis distribution.
flexnumber | stringFlex grow/shrink behavior.
flushbooleanExtend to parent edges, ignoring padding. Defaults to false.
scrollablebooleanEnable scrolling when content overflows. Defaults to false.
These common props let you control layout behavior consistently across Box, Col, and Row without needing to remember different APIs for each.

​
Card

The root container for widget content. Every widget code starts with a Card component as the outermost wrapper. 
<Card size="md">
  <Title value={title} size="sm" />
  <Text value={description} color="secondary" />
</Card>

​
Props

PropTypeDefaultDescription
sizesm | md | lg | fullmdControls the overall width of the card.
paddingspacing—Inner spacing of the card.
backgroundcolor—Background color.
borderborder—Border width, color, and style.
status{text, icon?} or {text, favicon?, frame?}—Displays a status indicator at the top of the card.
confirm{label, action}—Adds a confirm button to the card footer.
cancel{label, action}—Adds a cancel button to the card footer.
asFormbooleanfalseWraps the card content in a form element.
collapsedbooleanfalseRenders the card in a collapsed state.
themelight | dark—Forces a specific color theme for the card.
When confirm or cancel are provided, the card automatically renders action buttons in the footer. If asForm is true, the confirm button acts as the form submit button.

​
Box

A generic flex container for arranging child elements in any direction. 
<Box direction="row" align="center" gap={3} padding={4}>
  <Icon name="star" />
  <Text value="Featured" />
</Box>

​
Props

In addition to all common layout props, Box accepts:
PropTypeDefaultDescription
directionrow | col—Sets the flex direction of the container.
wrapnowrap | wrap | wrap-reverse—Controls whether children wrap to new lines.
sizenumber | string—Shorthand for setting both width and height to the same value.
minSizenumber | string—Shorthand for setting both minWidth and minHeight.
maxSizenumber | string—Shorthand for setting both maxWidth and maxHeight.
aspectRationumber | string—Sets a fixed aspect ratio for the container.

​
Col

A vertical flex container. This is a shorthand for Box with a column direction, making it the go-to choice for stacking elements vertically. 
<Col gap={2}>
  <Title value={title} size="sm" />
  <Text value={subtitle} color="secondary" />
</Col>

​
Props

Col accepts all common layout props and the same additional props as Box (wrap, size, minSize, maxSize, aspectRatio), except direction, which is always set to column.

​
Row

A horizontal flex container. This is a shorthand for Box with a row direction, making it the go-to choice for placing elements side by side. 
<Row gap={3} align="center">
  <Image src={avatar} size={40} radius="full" />
  <Text value={name} weight="semibold" />
  <Spacer />
  <Button label="View" variant="outline" />
</Row>

​
Props

Row accepts all common layout props and the same additional props as Box (wrap, size, minSize, maxSize, aspectRatio), except direction, which is always set to row.
Combine Row with Spacer to push elements to opposite ends of a container — a common pattern for headers, toolbars, and list items.

​
Spacer

A flexible empty space that expands to fill available room along the main axis. Use it to push sibling elements apart within a Row or Col. 
<Row>
  <Text value="Left" />
  <Spacer />
  <Text value="Right" />
</Row>

​
Props

PropTypeDefaultDescription
minSizenumber | string—Sets a minimum size for the spacer, ensuring it never shrinks below this value.

​
Divider

A horizontal line separator for visually breaking content into sections. 
<Col>
  <Text value="Section 1" />
  <Divider />
  <Text value="Section 2" />
</Col>

​
Props

PropTypeDefaultDescription
spacingnumber | string—Vertical space above and below the divider.
colorcolor—Color of the divider line.
sizenumber | string—Thickness of the divider line.
flushbooleanfalseExtend the divider to the parent edges, ignoring padding.

​
ListView

A scrollable list container for rendering collections of items. Use with ListViewItem to define each entry. 
<ListView orientation="vertical" gap={2} limit={5}>
  <ListViewItem>
    <Text value={itemName} />
  </ListViewItem>
</ListView>

​
Props

PropTypeDefaultDescription
orientationhorizontal | vertical—Scroll direction of the list.
gapnumber—Spacing between list items.
limitnumber | "auto"—Maximum number of visible items before scrolling.
status{text, icon?} or {text, favicon?, frame?}—Displays a status indicator on the list.
themelight | dark—Forces a specific color theme for the list.
Set limit to control how many items are visible at once. Items beyond the limit become accessible through scrolling, keeping the widget compact.

​
ListViewItem

An individual item inside a ListView. Items can be made interactive by providing an onClickAction. 
<ListViewItem onClickAction={{ functionName: "selectItem" }} gap={3} align="center">
  <Image src={thumbnail} size={40} />
  <Text value={itemName} />
</ListViewItem>

​
Props

PropTypeDefaultDescription
alignflex align—Cross-axis alignment of the item’s children.
gapnumber—Spacing between child elements within the item.
onClickActionaction—Action to execute when the item is clicked. Makes the item interactive.
When onClickAction is set, the item renders as a clickable element with hover and focus styles applied automatically.