Box
A styled container laid out by the whitelisted style object; what every macro expands into.
Group: Layout · Kind: native · in the lite catalog
Preview
Section titled “Preview”example
A Box lays its children out by style.Flex, grid, spacing and colours come from the whitelist.
Platforms
Section titled “Platforms”The same specimen painted by React, SwiftUI, Compose and gpui.




| Prop | Type | Required | Bindable | Description |
|---|---|---|---|---|
style |
style |
– | – | Layout and visual properties from the Box whitelist (flex, grid, sizes, spacing, colours). |
pressable |
boolean |
– | – | Makes the box a press target that fires press. |
Events
Section titled “Events”on.press: runs an action
None.
Children
Section titled “Children”many
A2UI basic mapping
Section titled “A2UI basic mapping”No basic catalog component maps here.
Built from
Section titled “Built from”A native component: every renderer paints it directly.
Accessibility
Section titled “Accessibility”Role: none
group (button when pressable). A pressable Box is a button.
| Keys | Action |
|---|---|
Enter Space |
press (pressable only) |
Theming
Section titled “Theming”Recipe parts: Box/root
Keyed by: pressable :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover
Related
Section titled “Related”Stack · Grid · Card · Separator · List · Resizable · ScrollArea · Sidebar