Displays plain text with optional styling variants.
Preview
code
1Regular textUsage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeText,3 Value: "Hello, world!",4}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "text" | Node type | required |
value | string | Text content to display | "" |
variant | string | Visual style variant | "default" |
Variants
| Variant | Description | CSS Classes |
|---|---|---|
default | Standard text | text-sm |
title | Prominent heading text | text-sm font-medium |
bold | Emphasized text | text-sm font-medium |
muted | De-emphasized secondary text | text-xs text-muted-foreground |
small | Compact text | text-xs |
Examples
Default Text
go
1{Type: models.WidgetNodeTypeText, Value: "Regular text content"}Title Text
go
1{Type: models.WidgetNodeTypeText, Value: "Step Title", Variant: "title"}Muted Text
go
1{Type: models.WidgetNodeTypeText, Value: "Secondary description", Variant: "muted"}Visual Hierarchy Example
Create clear visual hierarchy by combining variants:
go
1children := []models.WidgetNode{2 {3 Type: models.WidgetNodeTypeCol,4 Gap: 1,5 Children: []models.WidgetNode{6 {Type: models.WidgetNodeTypeText, Value: "Task Complete", Variant: "title"},7 {Type: models.WidgetNodeTypeText, Value: "Your report has been generated successfully.", Variant: "muted"},8 },9 },10}TypeScript
typescript
1const node: WidgetNode = {2 type: "text",3 value: "Hello, world!",4 variant: "muted",5}Best Practices
- Use variants for hierarchy - Combine
titleandmutedfor clear information hierarchy - Keep text concise - Long text should use the
markdownnode type - Use muted for secondary info - Descriptions, timestamps, and metadata