Flexible container for layout and surface styling with full control.
Preview
code
1┌─────────────────────┐2│ Inside a box │3│ with padding │4│ and background │5└─────────────────────┘Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeBox,3 Padding: 4,4 Background: "surface-secondary",5 Radius: "md",6 Children: []models.WidgetNode{7 {Type: models.WidgetNodeTypeText, Value: "Content"},8 },9}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "box" | Node type | required |
children | WidgetNode[] | Child components | - |
direction | "row" | "col" | Flex direction | "col" |
align | string | Cross-axis alignment: start, center, end, baseline, stretch | - |
justify | string | Main-axis distribution: start, center, end, between, around, evenly | - |
wrap | string | Wrap behavior: nowrap, wrap, wrap-reverse | - |
flex | string | number | Flex grow/shrink factor | - |
gap | number | string | Gap between children | - |
padding | number | string | object | Inner padding | - |
margin | number | string | object | Outer margin | - |
border | number | object | Border styling | - |
background | string | ThemeColor | Background color | - |
radius | string | Border radius token | - |
height | number | string | Explicit height | - |
width | number | string | Explicit width | - |
minHeight | number | string | Minimum height | - |
maxWidth | number | string | Maximum width | - |
aspectRatio | number | string | Aspect ratio (e.g., 16/9) | - |
Background Tokens
Surface colors:
surface- Default backgroundsurface-secondary- Slightly offsetsurface-tertiary- More offsetsurface-elevated- Raised appearancesurface-elevated-secondary- Raised + offset
Primitive colors:
red-100throughred-900blue-100throughblue-900gray-100throughgray-900- etc.
Radius Tokens
2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full, none
Examples
Card-like Container
go
1{2 Type: models.WidgetNodeTypeBox,3 Padding: 4,4 Background: "surface-secondary",5 Radius: "lg",6 Border: 1,7 Children: []models.WidgetNode{8 {Type: models.WidgetNodeTypeTitle, Value: "Card Title"},9 {Type: models.WidgetNodeTypeText, Value: "Card content goes here"},10 },11}Centered Content
go
1{2 Type: models.WidgetNodeTypeBox,3 Align: "center",4 Justify: "center",5 Height: 200,6 Children: []models.WidgetNode{7 {Type: models.WidgetNodeTypeText, Value: "Centered!"},8 },9}With Border
go
1{2 Type: models.WidgetNodeTypeBox,3 Padding: 3,4 Border: map[string]interface{}{5 "size": 1,6 "color": "subtle",7 "style": "dashed",8 },9 Radius: "md",10 Children: []models.WidgetNode{11 {Type: models.WidgetNodeTypeText, Value: "Dashed border"},12 },13}Horizontal with Spacing
go
1{2 Type: models.WidgetNodeTypeBox,3 Direction: "row",4 Gap: 4,5 Align: "center",6 Justify: "between",7 Children: []models.WidgetNode{8 {Type: models.WidgetNodeTypeText, Value: "Left"},9 {Type: models.WidgetNodeTypeText, Value: "Right"},10 },11}Box vs Row vs Col
| Use... | When... |
|---|---|
| Box | Need full layout control (background, border, sizing) |
| Row | Simple horizontal layout |
| Col | Simple vertical layout |
TypeScript
typescript
1const node: WidgetNode = {2 type: "box",3 padding: 4,4 background: "surface-secondary",5 radius: "md",6 children: [7 { type: "text", value: "Content" },8 ],9}Best Practices
- Use for styled containers - When you need background/border/radius
- Use Row/Col for simple layouts - Less verbose
- Be mindful of nesting - Deep box nesting hurts readability
- Use semantic backgrounds - Surface tokens adapt to themes