Arranges children horizontally with configurable gap.
Preview
code
1[child1] [child2] [child3]Usage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeRow,3 Gap: 2,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeBadge, Label: "✓", Variant: "secondary"},6 {Type: models.WidgetNodeTypeText, Value: "Step completed"},7 },8}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "row" | Node type | required |
gap | number | Gap between children (Tailwind spacing scale) | 2 |
children | WidgetNode[] | Child nodes to arrange horizontally | - |
Gap Values
Gap uses Tailwind's spacing scale:
| Gap | Pixels | Use Case |
|---|---|---|
0 | 0px | No gap |
1 | 4px | Tight spacing |
2 | 8px | Default spacing |
3 | 12px | Medium spacing |
4 | 16px | Large spacing |
Examples
Status Row
go
1{2 Type: models.WidgetNodeTypeRow,3 Gap: 2,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeBadge, Label: "●", Variant: "default"},6 {Type: models.WidgetNodeTypeCol, Gap: 1, Children: []models.WidgetNode{7 {Type: models.WidgetNodeTypeText, Value: "Processing", Variant: "title"},8 {Type: models.WidgetNodeTypeText, Value: "Analyzing your request", Variant: "muted"},9 }},10 },11}Button Row
go
1{2 Type: models.WidgetNodeTypeRow,3 Gap: 2,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeButton, Label: "Cancel", Variant: "outline"},6 {Type: models.WidgetNodeTypeButton, Label: "Confirm", Variant: "default"},7 },8}Inline Badges
go
1{2 Type: models.WidgetNodeTypeRow,3 Gap: 1,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeBadge, Label: "python", Variant: "outline"},6 {Type: models.WidgetNodeTypeBadge, Label: "async", Variant: "outline"},7 {Type: models.WidgetNodeTypeBadge, Label: "v2.0", Variant: "secondary"},8 },9}CSS Output
css
1.row {2 display: flex;3 flex-direction: row;4 flex-wrap: wrap;5 align-items: center;6 gap: var(--gap);7}TypeScript
typescript
1const node: WidgetNode = {2 type: "row",3 gap: 2,4 children: [5 { type: "badge", label: "✓", variant: "secondary" },6 { type: "text", value: "Done" },7 ],8}Best Practices
- Use for inline content - Badges with text, icon + label combinations
- Wrap in Col for lists - Use Col to stack multiple Rows vertically
- Consistent gap - Use
gap: 2for most cases - Align with items-center - Row automatically centers items vertically