Showcase
Presets from the visual test suite. Screenshots are the committed goldens — the same PNGs snapshot tests assert. Configs open in <details>; edit live in the playground.
android-list
Sizes: large
large
Config JSON
json
{
"version": 1,
"small": null,
"medium": null,
"large": {
"type": "list",
"items": [
{
"text": "Alpha",
"checked": true,
"action": "row",
"payload": "a"
},
{
"text": "Beta",
"checked": false,
"action": "row",
"payload": "b"
},
{
"text": "Gamma",
"checked": null,
"action": null,
"payload": null
}
],
"spacing": 2,
"fontSize": 14,
"color": null,
"padding": null,
"background": null,
"cornerRadius": null,
"opacity": null,
"frame": null,
"border": null,
"shadow": null,
"clipShape": null,
"flex": null
}
}calculator
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 6,
"spacing": 2,
"cornerRadius": 14,
"background": "#1c1c1e",
"children": [
{
"type": "hstack",
"spacing": 4,
"alignment": "center",
"children": [
{
"type": "text",
"content": " ",
"fontSize": 10,
"color": "#f09a36",
"alignment": "leading",
"lineLimit": 1
},
{
"type": "spacer"
},
{
"type": "text",
"content": "0",
"fontSize": 20,
"fontWeight": "bold",
"color": "#ffffff",
"alignment": "trailing",
"lineLimit": 1
}
]
},
{
"type": "divider",
"color": "#3a3a3c",
"thickness": 1
},
{
"type": "grid",
"columns": 4,
"spacing": 2,
"rowSpacing": 2,
"children": [
{
"type": "button",
"label": "C",
"action": "calc:C",
"backgroundColor": "#636366",
"color": "#fff",
"fontSize": 10,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "±",
"action": "calc:+-",
"backgroundColor": "#636366",
"color": "#fff",
"fontSize": 10,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "⌫",
"action": "calc:BS",
"backgroundColor": "#636366",
"color": "#fff",
"fontSize": 10,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "÷",
"action": "calc:/",
"backgroundColor": "#f09a36",
"color": "#fff",
"fontSize": 10,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "7",
"action": "calc:7",
"backgroundColor": "#3a3a3c",
"color": "#fff",
"fontSize": 11,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "8",
"action": "calc:8",
"backgroundColor": "#3a3a3c",
"color": "#fff",
"fontSize": 11,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "9",
"action": "calc:9",
"backgroundColor": "#3a3a3c",
"color": "#fff",
"fontSize": 11,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "×",
"action": "calc:*",
"backgroundColor": "#f09a36",
"color": "#fff",
"fontSize": 10,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "4",
"action": "calc:4",
"backgroundColor": "#3a3a3c",
"color": "#fff",
"fontSize": 11,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "5",
"action": "calc:5",
"backgroundColor": "#3a3a3c",
"color": "#fff",
"fontSize": 11,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "6",
"action": "calc:6",
"backgroundColor": "#3a3a3c",
"color": "#fff",
"fontSize": 11,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "−",
"action": "calc:-",
"backgroundColor": "#f09a36",
"color": "#fff",
"fontSize": 10,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "1",
"action": "calc:1",
"backgroundColor": "#3a3a3c",
"color": "#fff",
"fontSize": 11,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "2",
"action": "calc:2",
"backgroundColor": "#3a3a3c",
"color": "#fff",
"fontSize": 11,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "3",
"action": "calc:3",
"backgroundColor": "#3a3a3c",
"color": "#fff",
"fontSize": 11,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "+",
"action": "calc:+",
"backgroundColor": "#f09a36",
"color": "#fff",
"fontSize": 10,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "%",
"action": "calc:%",
"backgroundColor": "#636366",
"color": "#fff",
"fontSize": 10,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "0",
"action": "calc:0",
"backgroundColor": "#3a3a3c",
"color": "#fff",
"fontSize": 11,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": ".",
"action": "calc:.",
"backgroundColor": "#3a3a3c",
"color": "#fff",
"fontSize": 11,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
},
{
"type": "button",
"label": "=",
"action": "calc:=",
"backgroundColor": "#f09a36",
"color": "#fff",
"fontSize": 10,
"cornerRadius": 6,
"padding": {
"top": 1,
"bottom": 1,
"leading": 2,
"trailing": 2
}
}
]
}
]
}
}canvas
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "canvas",
"width": 120,
"height": 120,
"elements": [
{
"draw": "circle",
"cx": 60,
"cy": 60,
"r": 40,
"fill": "#1a1a2e",
"stroke": "#fff",
"strokeWidth": 2
}
],
"padding": null,
"background": null,
"cornerRadius": null,
"opacity": null,
"frame": null,
"border": null,
"shadow": null,
"clipShape": null,
"flex": null
},
"medium": null,
"large": null
}canvas-draws
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "canvas",
"width": 146,
"height": 146,
"background": "#0b1220",
"cornerRadius": 12,
"elements": [
{
"draw": "rect",
"x": 12,
"y": 12,
"width": 48,
"height": 32,
"fill": "#1e293b",
"stroke": "#38bdf8",
"strokeWidth": 2,
"cornerRadius": 6
},
{
"draw": "circle",
"cx": 110,
"cy": 36,
"r": 18,
"fill": "#22c55e",
"stroke": "#86efac",
"strokeWidth": 2
},
{
"draw": "arc",
"cx": 48,
"cy": 90,
"r": 28,
"startAngle": -90,
"endAngle": 120,
"stroke": "#f59e0b",
"strokeWidth": 4
},
{
"draw": "path",
"d": "M90 70 L130 110 L90 110 Z",
"fill": "#a855f7",
"stroke": "#e9d5ff",
"strokeWidth": 1
},
{
"draw": "text",
"x": 73,
"y": 136,
"content": "draw",
"fontSize": 12,
"color": "#e2e8f0",
"anchor": "middle"
}
]
}
}canvas-scale
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 4,
"background": "#111",
"alignment": "center",
"children": [
{
"type": "canvas",
"width": 60,
"height": 60,
"elements": [
{
"draw": "circle",
"cx": 30,
"cy": 30,
"r": 25,
"fill": "#1e40af",
"stroke": "#fff",
"strokeWidth": 2
},
{
"draw": "line",
"x1": 30,
"y1": 30,
"x2": 30,
"y2": 10,
"stroke": "#fff",
"strokeWidth": 2
}
]
}
]
}
}chart-mix
Sizes: medium
medium
Config JSON
json
{
"version": 1,
"medium": {
"type": "hstack",
"padding": 10,
"spacing": 10,
"cornerRadius": 14,
"background": "#111827",
"alignment": "center",
"children": [
{
"type": "vstack",
"spacing": 4,
"flex": 1,
"children": [
{
"type": "text",
"content": "Bar",
"fontSize": 11,
"color": "#94a3b8"
},
{
"type": "chart",
"chartType": "bar",
"tint": "#22c55e",
"chartData": [
{
"label": "M",
"value": 3,
"color": "#22c55e"
},
{
"label": "T",
"value": 5,
"color": "#3b82f6"
},
{
"label": "W",
"value": 2,
"color": "#f59e0b"
},
{
"label": "T",
"value": 7,
"color": "#ef4444"
}
]
}
]
},
{
"type": "vstack",
"spacing": 4,
"flex": 1,
"children": [
{
"type": "text",
"content": "Line",
"fontSize": 11,
"color": "#94a3b8"
},
{
"type": "chart",
"chartType": "line",
"tint": "#38bdf8",
"chartData": [
{
"label": "1",
"value": 2
},
{
"label": "2",
"value": 4
},
{
"label": "3",
"value": 3
},
{
"label": "4",
"value": 6
},
{
"label": "5",
"value": 5
}
]
}
]
},
{
"type": "vstack",
"spacing": 4,
"alignment": "center",
"flex": 1,
"children": [
{
"type": "text",
"content": "Pie",
"fontSize": 11,
"color": "#94a3b8"
},
{
"type": "chart",
"chartType": "pie",
"chartData": [
{
"label": "A",
"value": 40,
"color": "#3b82f6"
},
{
"label": "B",
"value": 35,
"color": "#22c55e"
},
{
"label": "C",
"value": 25,
"color": "#f97316"
}
]
}
]
}
]
}
}container-card
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "container",
"contentAlignment": "center",
"padding": 12,
"cornerRadius": 16,
"background": "#1C1C1E",
"frame": {
"width": 146,
"height": 146
},
"children": [
{
"type": "vstack",
"spacing": 8,
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "circle",
"size": 36,
"fill": "#3b82f6"
},
{
"type": "text",
"content": "Card",
"fontSize": 15,
"fontWeight": "semibold",
"color": "#FFFFFF"
}
]
}
]
}
}date-timer
Sizes: medium
medium
Config JSON
json
{
"version": 1,
"medium": {
"type": "vstack",
"padding": 12,
"spacing": 8,
"cornerRadius": 14,
"background": "#0f172a",
"children": [
{
"type": "text",
"content": "Schedule",
"fontSize": 15,
"fontWeight": "semibold",
"color": "#f8fafc"
},
{
"type": "hstack",
"spacing": 16,
"alignment": "center",
"children": [
{
"type": "vstack",
"spacing": 4,
"alignment": "leading",
"children": [
{
"type": "text",
"content": "Time",
"fontSize": 11,
"color": "#94a3b8"
},
{
"type": "date",
"date": "2099-06-15T14:30:00Z",
"dateStyle": "time",
"fontSize": 14,
"color": "#e2e8f0"
}
]
},
{
"type": "vstack",
"spacing": 4,
"alignment": "leading",
"children": [
{
"type": "text",
"content": "Relative",
"fontSize": 11,
"color": "#94a3b8"
},
{
"type": "date",
"date": "2099-12-25T00:00:00Z",
"dateStyle": "relative",
"fontSize": 14,
"color": "#e2e8f0"
}
]
},
{
"type": "vstack",
"spacing": 4,
"alignment": "leading",
"children": [
{
"type": "text",
"content": "Countdown",
"fontSize": 11,
"color": "#94a3b8"
},
{
"type": "timer",
"targetDate": "2099-01-01T00:00:00Z",
"counting": "down",
"fontSize": 14,
"fontWeight": "semibold",
"color": "#38bdf8"
}
]
}
]
}
]
}
}fitness
Sizes: small, medium
small
medium
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 12,
"spacing": 8,
"cornerRadius": 16,
"background": "#0d1117",
"children": [
{
"type": "text",
"content": "Activity",
"fontSize": 15,
"fontWeight": "semibold",
"color": "#fff"
},
{
"type": "gauge",
"value": 0.72,
"min": 0,
"max": 1,
"currentValueLabel": "72%",
"label": "Steps",
"gaugeStyle": "circular",
"tint": "#ff6b6b"
},
{
"type": "hstack",
"spacing": 8,
"children": [
{
"type": "progress",
"value": 0.45,
"tint": "#4ecdc4",
"label": "Cal",
"color": "#94a3b8"
},
{
"type": "progress",
"value": 0.88,
"tint": "#ffe66d",
"label": "H2O",
"color": "#94a3b8"
}
]
}
]
},
"medium": {
"type": "hstack",
"padding": 14,
"spacing": 16,
"cornerRadius": 16,
"background": "#0d1117",
"children": [
{
"type": "vstack",
"spacing": 6,
"alignment": "center",
"children": [
{
"type": "gauge",
"value": 0.72,
"min": 0,
"max": 1,
"currentValueLabel": "72%",
"label": "Steps",
"gaugeStyle": "circular",
"tint": "#ff6b6b"
},
{
"type": "text",
"content": "7,200 / 10k",
"fontSize": 11,
"color": "#94a3b8"
}
]
},
{
"type": "divider",
"color": "#334155"
},
{
"type": "vstack",
"spacing": 6,
"children": [
{
"type": "progress",
"value": 0.45,
"tint": "#4ecdc4",
"label": "Calories",
"color": "#94a3b8"
},
{
"type": "progress",
"value": 0.88,
"tint": "#ffe66d",
"label": "Water",
"color": "#94a3b8"
},
{
"type": "progress",
"value": 0.33,
"tint": "#ff6b6b",
"label": "Exercise",
"color": "#94a3b8"
}
]
}
]
}
}flex-stroke-grid
Sizes: medium
medium
Config JSON
json
{
"version": 1,
"medium": {
"type": "vstack",
"padding": {
"top": 10,
"leading": 12,
"bottom": 10,
"trailing": 12
},
"spacing": 8,
"cornerRadius": 14,
"background": "#0f172a",
"children": [
{
"type": "text",
"content": "Flex + stroke",
"fontSize": 13,
"fontWeight": "semibold",
"color": "#f8fafc",
"frame": {
"maxWidth": 200
}
},
{
"type": "grid",
"columns": 3,
"spacing": 8,
"children": [
{
"type": "shape",
"shapeType": "rectangle",
"size": 36,
"fill": "#1e293b",
"stroke": "#22c55e",
"strokeWidth": 2,
"cornerRadius": 8,
"flex": 1
},
{
"type": "shape",
"shapeType": "circle",
"size": 36,
"fill": "transparent",
"stroke": "#38bdf8",
"strokeWidth": 3,
"flex": 1
},
{
"type": "shape",
"shapeType": "capsule",
"size": 18,
"fill": "#312e81",
"stroke": "#a855f7",
"strokeWidth": 2,
"flex": 1
},
{
"type": "text",
"content": "A",
"fontSize": 12,
"color": "#94a3b8",
"alignment": "center",
"flex": 1
},
{
"type": "text",
"content": "B",
"fontSize": 12,
"color": "#94a3b8",
"alignment": "center",
"flex": 1
},
{
"type": "text",
"content": "C",
"fontSize": 12,
"color": "#94a3b8",
"alignment": "center",
"flex": 1
}
]
}
]
}
}gauge-square
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 8,
"background": "#0f172a",
"alignment": "center",
"children": [
{
"type": "gauge",
"value": 0.72,
"min": 0,
"max": 1,
"label": "CPU",
"currentValueLabel": "72%",
"tint": "#7aa2f7",
"gaugeStyle": "circular"
}
]
}
}hstack-divider
Sizes: medium
medium
Config JSON
json
{
"version": 1,
"medium": {
"type": "hstack",
"spacing": 8,
"padding": 12,
"background": "#0f172a",
"children": [
{
"type": "text",
"content": "L",
"fontSize": 16,
"color": "#fff"
},
{
"type": "divider",
"thickness": 2,
"color": "#64748b"
},
{
"type": "text",
"content": "R",
"fontSize": 16,
"color": "#fff"
}
]
}
}image-sources
Sizes: medium
medium
Config JSON
json
{
"version": 1,
"medium": {
"type": "hstack",
"padding": 12,
"spacing": 16,
"cornerRadius": 14,
"background": "#0f172a",
"alignment": "center",
"children": [
{
"type": "vstack",
"spacing": 4,
"alignment": "center",
"children": [
{
"type": "text",
"content": "SF",
"fontSize": 10,
"color": "#94a3b8"
},
{
"type": "image",
"systemName": "star.fill",
"size": 32,
"color": "#fbbf24"
}
]
},
{
"type": "vstack",
"spacing": 4,
"alignment": "center",
"children": [
{
"type": "text",
"content": "Data",
"fontSize": 10,
"color": "#94a3b8"
},
{
"type": "image",
"data": "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGO4o6b2HwAFMgIozFXxQQAAAABJRU5ErkJggg==",
"size": 32,
"contentMode": "fill",
"clipShape": "circle"
}
]
},
{
"type": "vstack",
"spacing": 4,
"alignment": "center",
"children": [
{
"type": "text",
"content": "URL",
"fontSize": 10,
"color": "#94a3b8"
},
{
"type": "image",
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGOw2PvjPwAGCwLtgxz7OwAAAABJRU5ErkJggg==",
"size": 32,
"contentMode": "fit"
}
]
}
]
}
}layout
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"spacing": 8,
"padding": 12,
"background": "#1a1a2e",
"children": [
{
"type": "text",
"content": "Hello",
"fontSize": 18,
"fontWeight": "bold",
"color": "#fff",
"alignment": "center"
},
{
"type": "hstack",
"spacing": 4,
"children": [
{
"type": "shape",
"shapeType": "capsule",
"size": 8,
"fill": "#4CAF50"
},
{
"type": "divider"
},
{
"type": "spacer"
},
{
"type": "progress",
"value": 0.5,
"tint": "#4CAF50",
"label": "OK"
}
]
},
{
"type": "button",
"label": "Go",
"action": "go",
"backgroundColor": "#2196F3",
"color": "#fff"
}
]
}
}link-chip
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 14,
"spacing": 8,
"cornerRadius": 14,
"background": "#0b1220",
"alignment": "center",
"children": [
{
"type": "link",
"action": "open_settings",
"padding": 8,
"cornerRadius": 999,
"background": "#1e293b",
"children": [
{
"type": "hstack",
"spacing": 6,
"alignment": "center",
"children": [
{
"type": "image",
"systemName": "gear",
"size": 14,
"color": "#38bdf8"
},
{
"type": "text",
"content": "Settings",
"fontSize": 13,
"fontWeight": "medium",
"color": "#e2e8f0"
}
]
}
]
}
]
}
}list-20-items
Sizes: large
large
Config JSON
json
{
"version": 1,
"large": {
"type": "list",
"spacing": 2,
"fontSize": 12,
"color": "#e2e8f0",
"background": "#0f172a",
"padding": 8,
"items": [
{
"text": "Item 01",
"checked": false
},
{
"text": "Item 02",
"checked": true
},
{
"text": "Item 03"
},
{
"text": "Item 04"
},
{
"text": "Item 05"
},
{
"text": "Item 06"
},
{
"text": "Item 07"
},
{
"text": "Item 08"
},
{
"text": "Item 09"
},
{
"text": "Item 10"
},
{
"text": "Item 11"
},
{
"text": "Item 12"
},
{
"text": "Item 13"
},
{
"text": "Item 14"
},
{
"text": "Item 15"
},
{
"text": "Item 16"
},
{
"text": "Item 17"
},
{
"text": "Item 18"
},
{
"text": "Item 19"
},
{
"text": "Item 20"
}
]
}
}music
Sizes: medium
medium
Config JSON
json
{
"version": 1,
"medium": {
"type": "hstack",
"padding": 14,
"spacing": 14,
"cornerRadius": 16,
"background": "#16213e",
"children": [
{
"type": "shape",
"shapeType": "circle",
"fill": "#e94560",
"size": 56
},
{
"type": "vstack",
"spacing": 6,
"alignment": "leading",
"children": [
{
"type": "text",
"content": "Bohemian Rhapsody",
"fontSize": 17,
"fontWeight": "semibold",
"color": "#fff",
"lineLimit": 1
},
{
"type": "text",
"content": "Queen • A Night at the Opera",
"fontSize": 12,
"color": "#94a3b8"
},
{
"type": "progress",
"value": 0.625,
"tint": "#e94560",
"label": "3:42 / 5:55",
"color": "#94a3b8"
},
{
"type": "hstack",
"spacing": 20,
"children": [
{
"type": "button",
"label": "⏮",
"action": "music_prev",
"backgroundColor": "#1a2744",
"color": "#e2e8f0",
"fontSize": 14,
"textAlignment": "center"
},
{
"type": "button",
"label": "⏸",
"action": "music_toggle",
"backgroundColor": "#e94560",
"color": "#ffffff",
"fontSize": 14,
"textAlignment": "center"
},
{
"type": "button",
"label": "⏭",
"action": "music_next",
"backgroundColor": "#1a2744",
"color": "#e2e8f0",
"fontSize": 14,
"textAlignment": "center"
}
]
}
]
}
]
}
}nested-dashboard
Sizes: large
large
Config JSON
json
{
"version": 1,
"large": {
"type": "vstack",
"padding": 12,
"spacing": 8,
"cornerRadius": 16,
"background": "#0f172a",
"children": [
{
"type": "hstack",
"spacing": 10,
"alignment": "center",
"children": [
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "circle",
"fill": "#334155",
"size": 44
},
{
"type": "text",
"content": "42",
"fontSize": 16,
"fontWeight": "bold",
"color": "#fff"
}
]
},
{
"type": "vstack",
"spacing": 2,
"alignment": "leading",
"children": [
{
"type": "text",
"content": "Nested Dashboard",
"fontSize": 16,
"fontWeight": "bold",
"color": "#f8fafc",
"lineLimit": 1
},
{
"type": "text",
"content": "hstack → zstack + grid + list",
"fontSize": 11,
"color": "#94a3b8",
"lineLimit": 1
}
]
},
{
"type": "spacer"
},
{
"type": "button",
"label": "Sync",
"action": "dash_sync",
"backgroundColor": "#2563eb",
"color": "#fff",
"fontSize": 12,
"cornerRadius": 8
}
]
},
{
"type": "divider",
"color": "#334155"
},
{
"type": "grid",
"columns": 2,
"spacing": 8,
"rowSpacing": 8,
"children": [
{
"type": "vstack",
"padding": 8,
"spacing": 4,
"cornerRadius": 10,
"background": "#1e293b",
"children": [
{
"type": "text",
"content": "CPU",
"fontSize": 11,
"color": "#94a3b8"
},
{
"type": "text",
"content": "38%",
"fontSize": 22,
"fontWeight": "bold",
"color": "#22c55e"
},
{
"type": "progress",
"value": 0.38,
"tint": "#22c55e"
}
]
},
{
"type": "vstack",
"padding": 8,
"spacing": 4,
"cornerRadius": 10,
"background": "#1e293b",
"children": [
{
"type": "text",
"content": "RAM",
"fontSize": 11,
"color": "#94a3b8"
},
{
"type": "text",
"content": "62%",
"fontSize": 22,
"fontWeight": "bold",
"color": "#f59e0b"
},
{
"type": "progress",
"value": 0.62,
"tint": "#f59e0b"
}
]
},
{
"type": "vstack",
"padding": 8,
"spacing": 4,
"cornerRadius": 10,
"background": "#1e293b",
"children": [
{
"type": "text",
"content": "Disk",
"fontSize": 11,
"color": "#94a3b8"
},
{
"type": "text",
"content": "81%",
"fontSize": 22,
"fontWeight": "bold",
"color": "#ef4444"
},
{
"type": "progress",
"value": 0.81,
"tint": "#ef4444"
}
]
},
{
"type": "vstack",
"padding": 8,
"spacing": 4,
"cornerRadius": 10,
"background": "#1e293b",
"children": [
{
"type": "text",
"content": "Net",
"fontSize": 11,
"color": "#94a3b8"
},
{
"type": "text",
"content": "12MB/s",
"fontSize": 18,
"fontWeight": "bold",
"color": "#38bdf8"
},
{
"type": "progress",
"value": 0.24,
"tint": "#38bdf8"
}
]
}
]
},
{
"type": "divider",
"color": "#334155"
},
{
"type": "list",
"spacing": 3,
"fontSize": 12,
"color": "#e2e8f0",
"items": [
{
"text": "api-gateway",
"checked": true
},
{
"text": "worker-pool",
"checked": true
},
{
"text": "cache-redis",
"checked": false
},
{
"text": "queue-amqp"
}
]
}
]
}
}null-fields
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 8,
"background": "#000",
"children": [
{
"type": "button",
"label": "Tap",
"action": "go",
"url": null,
"color": "#fff",
"backgroundColor": "#2563eb"
},
{
"type": "text",
"content": "ok",
"fontSize": 12,
"color": "#fff",
"fontWeight": null
},
{
"type": "progress",
"value": 0.3,
"label": null,
"tint": "#22c55e"
}
]
}
}progress-gauge-variants
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 10,
"spacing": 8,
"cornerRadius": 14,
"background": "#111827",
"children": [
{
"type": "hstack",
"spacing": 12,
"alignment": "center",
"children": [
{
"type": "progress",
"value": 0.65,
"barStyle": "circular",
"tint": "#22c55e"
},
{
"type": "progress",
"value": 0.4,
"barStyle": "linear",
"tint": "#38bdf8",
"label": "Linear",
"color": "#94a3b8",
"flex": 1
}
]
},
{
"type": "hstack",
"spacing": 16,
"alignment": "center",
"children": [
{
"type": "gauge",
"value": 0.72,
"min": 0,
"max": 1,
"currentValueLabel": "72%",
"label": "Circ",
"gaugeStyle": "circular",
"tint": "#f59e0b",
"color": "#e2e8f0"
},
{
"type": "gauge",
"value": 0.45,
"min": 0,
"max": 1,
"currentValueLabel": "45%",
"label": "Lin",
"gaugeStyle": "linear",
"tint": "#a855f7",
"color": "#e2e8f0",
"flex": 1
}
]
}
]
}
}shape-capsule
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 12,
"background": "#0a0a0a",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "capsule",
"size": 12,
"fill": "#22c55e"
},
{
"type": "shape",
"shapeType": "circle",
"size": 24,
"fill": "#3b82f6"
}
]
}
}style-chrome
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 12,
"spacing": 10,
"cornerRadius": 16,
"background": {
"gradientType": "linear",
"colors": [
"#0f172a",
"#312e81"
],
"direction": "topLeadingToBottomTrailing"
},
"border": {
"color": "#6366f1",
"width": 2
},
"shadow": {
"color": "rgba(99,102,241,0.45)",
"radius": 10,
"x": 0,
"y": 4
},
"children": [
{
"type": "hstack",
"spacing": 10,
"alignment": "center",
"children": [
{
"type": "image",
"systemName": "person.fill",
"size": 36,
"color": "#fff",
"clipShape": "circle",
"background": "#6366f1",
"frame": {
"width": 36,
"height": 36
}
},
{
"type": "text",
"content": "Chrome",
"fontSize": 15,
"fontWeight": "semibold",
"color": "#f8fafc",
"opacity": 0.85
}
]
}
]
}
}tasks
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"children": [
{
"type": "text",
"content": "Tasks",
"fontSize": 18,
"fontWeight": "bold",
"fontDesign": null,
"textStyle": null,
"color": null,
"alignment": null,
"lineLimit": null,
"padding": null,
"background": null,
"cornerRadius": null,
"opacity": null,
"frame": null,
"border": null,
"shadow": null,
"clipShape": null,
"flex": null
},
{
"type": "list",
"items": [
{
"text": "Buy milk",
"checked": false,
"action": "toggle",
"payload": null
},
{
"text": "Ship 0.4",
"checked": true,
"action": null,
"payload": null
}
],
"spacing": 4,
"fontSize": null,
"color": null,
"padding": null,
"background": null,
"cornerRadius": null,
"opacity": null,
"frame": null,
"border": null,
"shadow": null,
"clipShape": null,
"flex": null
}
],
"spacing": 6,
"alignment": null,
"padding": 10,
"background": null,
"cornerRadius": null,
"opacity": null,
"frame": null,
"border": null,
"shadow": null,
"clipShape": null,
"flex": null
},
"medium": null,
"large": null
}text-align
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 8,
"background": "#111",
"children": [
{
"type": "text",
"content": "Leading",
"fontSize": 14,
"color": "#fff",
"alignment": "leading"
},
{
"type": "text",
"content": "Center",
"fontSize": 14,
"color": "#fff",
"alignment": "center"
},
{
"type": "text",
"content": "Trailing",
"fontSize": 14,
"color": "#fff",
"alignment": "trailing"
}
]
}
}toggle-row
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 12,
"spacing": 10,
"cornerRadius": 14,
"background": "#1C1C1E",
"children": [
{
"type": "toggle",
"isOn": true,
"label": "Wi-Fi",
"tint": "#22c55e",
"color": "#e2e8f0",
"action": "toggle_wifi"
},
{
"type": "toggle",
"isOn": false,
"label": "Bluetooth",
"tint": "#3b82f6",
"color": "#e2e8f0",
"action": "toggle_bt"
}
]
}
}type-styles
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 10,
"spacing": 6,
"cornerRadius": 14,
"background": "#111827",
"children": [
{
"type": "text",
"content": "Headline",
"textStyle": "headline",
"fontWeight": "semibold",
"color": {
"light": "#0f172a",
"dark": "#f8fafc"
}
},
{
"type": "text",
"content": "mono 0123",
"fontDesign": "monospaced",
"fontSize": 13,
"color": "#38bdf8"
},
{
"type": "text",
"content": "Serif body",
"fontDesign": "serif",
"fontSize": 14,
"color": "#e2e8f0"
},
{
"type": "text",
"content": "Caption line",
"textStyle": "caption",
"color": "#94a3b8"
}
]
}
}upcoming-payments
Sizes: small, medium, large
small
medium
large
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 14,
"spacing": 10,
"cornerRadius": 16,
"background": {
"light": "#F2F2F7",
"dark": "#1C1C1E"
},
"children": [
{
"type": "divider",
"color": "#3878FA",
"thickness": 4
},
{
"type": "hstack",
"spacing": 10,
"alignment": "center",
"children": [
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "rectangle",
"fill": "#1F59E0",
"size": 44,
"cornerRadius": 10
},
{
"type": "text",
"content": "S",
"fontSize": 18,
"fontWeight": "bold",
"fontDesign": "rounded",
"color": "#FFFFFF"
}
]
},
{
"type": "vstack",
"spacing": 2,
"alignment": "leading",
"flex": 1,
"children": [
{
"type": "text",
"content": "Streaming",
"fontSize": 15,
"fontWeight": "bold",
"fontDesign": "rounded",
"color": "label",
"lineLimit": 1
},
{
"type": "text",
"content": "Jun 1",
"fontSize": 11,
"fontWeight": "semibold",
"color": "secondaryLabel",
"lineLimit": 1
}
]
}
]
},
{
"type": "spacer"
},
{
"type": "text",
"content": "$12.50",
"fontSize": 22,
"fontWeight": "bold",
"fontDesign": "rounded",
"color": "#3878FA",
"alignment": "leading",
"lineLimit": 1
}
]
},
"medium": {
"type": "vstack",
"padding": 10,
"spacing": 4,
"cornerRadius": 16,
"background": {
"light": "#F2F2F7",
"dark": "#1C1C1E"
},
"children": [
{
"type": "label",
"text": "Upcoming",
"systemName": "calendar.badge.clock",
"fontSize": 11,
"fontWeight": "bold",
"color": "label",
"iconColor": "#3878FA",
"spacing": 4
},
{
"type": "grid",
"columns": 2,
"spacing": 8,
"rowSpacing": 6,
"children": [
{
"type": "hstack",
"spacing": 6,
"alignment": "center",
"children": [
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "rectangle",
"fill": "#1F59E0",
"size": 20,
"cornerRadius": 5
},
{
"type": "text",
"content": "S",
"fontSize": 9,
"fontWeight": "bold",
"color": "#FFFFFF"
}
]
},
{
"type": "vstack",
"spacing": 0,
"alignment": "leading",
"flex": 1,
"children": [
{
"type": "text",
"content": "Streaming",
"fontSize": 10,
"fontWeight": "semibold",
"color": "label",
"lineLimit": 1
},
{
"type": "text",
"content": "Jun 1",
"fontSize": 8,
"color": "secondaryLabel",
"lineLimit": 1
}
]
},
{
"type": "text",
"content": "$12.50",
"fontSize": 10,
"fontWeight": "bold",
"color": "#3878FA",
"lineLimit": 1
}
]
},
{
"type": "hstack",
"spacing": 6,
"alignment": "center",
"children": [
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "rectangle",
"fill": "#1F59E0",
"size": 20,
"cornerRadius": 5
},
{
"type": "text",
"content": "C",
"fontSize": 9,
"fontWeight": "bold",
"color": "#FFFFFF"
}
]
},
{
"type": "vstack",
"spacing": 0,
"alignment": "leading",
"flex": 1,
"children": [
{
"type": "text",
"content": "Cloud Pro",
"fontSize": 10,
"fontWeight": "semibold",
"color": "label",
"lineLimit": 1
},
{
"type": "text",
"content": "Today",
"fontSize": 8,
"color": "secondaryLabel",
"lineLimit": 1
}
]
},
{
"type": "text",
"content": "$9.99",
"fontSize": 10,
"fontWeight": "bold",
"color": "#3878FA",
"lineLimit": 1
}
]
},
{
"type": "hstack",
"spacing": 6,
"alignment": "center",
"children": [
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "rectangle",
"fill": "#1F59E0",
"size": 20,
"cornerRadius": 5
},
{
"type": "text",
"content": "M",
"fontSize": 9,
"fontWeight": "bold",
"color": "#FFFFFF"
}
]
},
{
"type": "vstack",
"spacing": 0,
"alignment": "leading",
"flex": 1,
"children": [
{
"type": "text",
"content": "Music Plus",
"fontSize": 10,
"fontWeight": "semibold",
"color": "label",
"lineLimit": 1
},
{
"type": "text",
"content": "Tomorrow",
"fontSize": 8,
"color": "secondaryLabel",
"lineLimit": 1
}
]
},
{
"type": "text",
"content": "$4.99",
"fontSize": 10,
"fontWeight": "bold",
"color": "#3878FA",
"lineLimit": 1
}
]
},
{
"type": "hstack",
"spacing": 6,
"alignment": "center",
"children": [
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "rectangle",
"fill": "#1F59E0",
"size": 20,
"cornerRadius": 5
},
{
"type": "text",
"content": "N",
"fontSize": 9,
"fontWeight": "bold",
"color": "#FFFFFF"
}
]
},
{
"type": "vstack",
"spacing": 0,
"alignment": "leading",
"flex": 1,
"children": [
{
"type": "text",
"content": "News Daily",
"fontSize": 10,
"fontWeight": "semibold",
"color": "label",
"lineLimit": 1
},
{
"type": "text",
"content": "Jun 5",
"fontSize": 8,
"color": "secondaryLabel",
"lineLimit": 1
}
]
},
{
"type": "text",
"content": "$2.99",
"fontSize": 10,
"fontWeight": "bold",
"color": "#3878FA",
"lineLimit": 1
}
]
}
]
},
{
"type": "spacer",
"minLength": 2
},
{
"type": "text",
"content": "+2 more",
"fontSize": 9,
"fontWeight": "bold",
"color": "secondaryLabel",
"lineLimit": 1
}
]
},
"large": {
"type": "vstack",
"padding": 12,
"spacing": 4,
"cornerRadius": 16,
"background": {
"light": "#F2F2F7",
"dark": "#1C1C1E"
},
"children": [
{
"type": "label",
"text": "Upcoming",
"systemName": "calendar.badge.clock",
"fontSize": 11,
"fontWeight": "bold",
"color": "label",
"iconColor": "#3878FA",
"spacing": 4
},
{
"type": "grid",
"columns": 2,
"spacing": 10,
"rowSpacing": 8,
"children": [
{
"type": "hstack",
"spacing": 6,
"alignment": "center",
"children": [
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "rectangle",
"fill": "#1F59E0",
"size": 24,
"cornerRadius": 6
},
{
"type": "text",
"content": "S",
"fontSize": 11,
"fontWeight": "bold",
"color": "#FFFFFF"
}
]
},
{
"type": "vstack",
"spacing": 0,
"alignment": "leading",
"flex": 1,
"children": [
{
"type": "text",
"content": "Streaming",
"fontSize": 11,
"fontWeight": "semibold",
"color": "label",
"lineLimit": 1
},
{
"type": "text",
"content": "Jun 1",
"fontSize": 9,
"color": "secondaryLabel",
"lineLimit": 1
}
]
},
{
"type": "text",
"content": "$12.50",
"fontSize": 11,
"fontWeight": "bold",
"color": "#3878FA",
"lineLimit": 1
}
]
},
{
"type": "hstack",
"spacing": 6,
"alignment": "center",
"children": [
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "rectangle",
"fill": "#1F59E0",
"size": 24,
"cornerRadius": 6
},
{
"type": "text",
"content": "C",
"fontSize": 11,
"fontWeight": "bold",
"color": "#FFFFFF"
}
]
},
{
"type": "vstack",
"spacing": 0,
"alignment": "leading",
"flex": 1,
"children": [
{
"type": "text",
"content": "Cloud Pro",
"fontSize": 11,
"fontWeight": "semibold",
"color": "label",
"lineLimit": 1
},
{
"type": "text",
"content": "Today",
"fontSize": 9,
"color": "secondaryLabel",
"lineLimit": 1
}
]
},
{
"type": "text",
"content": "$9.99",
"fontSize": 11,
"fontWeight": "bold",
"color": "#3878FA",
"lineLimit": 1
}
]
},
{
"type": "hstack",
"spacing": 6,
"alignment": "center",
"children": [
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "rectangle",
"fill": "#1F59E0",
"size": 24,
"cornerRadius": 6
},
{
"type": "text",
"content": "M",
"fontSize": 11,
"fontWeight": "bold",
"color": "#FFFFFF"
}
]
},
{
"type": "vstack",
"spacing": 0,
"alignment": "leading",
"flex": 1,
"children": [
{
"type": "text",
"content": "Music Plus",
"fontSize": 11,
"fontWeight": "semibold",
"color": "label",
"lineLimit": 1
},
{
"type": "text",
"content": "Tomorrow",
"fontSize": 9,
"color": "secondaryLabel",
"lineLimit": 1
}
]
},
{
"type": "text",
"content": "$4.99",
"fontSize": 11,
"fontWeight": "bold",
"color": "#3878FA",
"lineLimit": 1
}
]
},
{
"type": "hstack",
"spacing": 6,
"alignment": "center",
"children": [
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "rectangle",
"fill": "#1F59E0",
"size": 24,
"cornerRadius": 6
},
{
"type": "text",
"content": "N",
"fontSize": 11,
"fontWeight": "bold",
"color": "#FFFFFF"
}
]
},
{
"type": "vstack",
"spacing": 0,
"alignment": "leading",
"flex": 1,
"children": [
{
"type": "text",
"content": "News Daily",
"fontSize": 11,
"fontWeight": "semibold",
"color": "label",
"lineLimit": 1
},
{
"type": "text",
"content": "Jun 5",
"fontSize": 9,
"color": "secondaryLabel",
"lineLimit": 1
}
]
},
{
"type": "text",
"content": "$2.99",
"fontSize": 11,
"fontWeight": "bold",
"color": "#3878FA",
"lineLimit": 1
}
]
},
{
"type": "hstack",
"spacing": 6,
"alignment": "center",
"children": [
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "rectangle",
"fill": "#1F59E0",
"size": 24,
"cornerRadius": 6
},
{
"type": "text",
"content": "G",
"fontSize": 11,
"fontWeight": "bold",
"color": "#FFFFFF"
}
]
},
{
"type": "vstack",
"spacing": 0,
"alignment": "leading",
"flex": 1,
"children": [
{
"type": "text",
"content": "Gym Club",
"fontSize": 11,
"fontWeight": "semibold",
"color": "label",
"lineLimit": 1
},
{
"type": "text",
"content": "Jun 8",
"fontSize": 9,
"color": "secondaryLabel",
"lineLimit": 1
}
]
},
{
"type": "text",
"content": "$29.00",
"fontSize": 11,
"fontWeight": "bold",
"color": "#3878FA",
"lineLimit": 1
}
]
},
{
"type": "hstack",
"spacing": 6,
"alignment": "center",
"children": [
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "rectangle",
"fill": "#1F59E0",
"size": 24,
"cornerRadius": 6
},
{
"type": "text",
"content": "V",
"fontSize": 11,
"fontWeight": "bold",
"color": "#FFFFFF"
}
]
},
{
"type": "vstack",
"spacing": 0,
"alignment": "leading",
"flex": 1,
"children": [
{
"type": "text",
"content": "VPN Secure",
"fontSize": 11,
"fontWeight": "semibold",
"color": "label",
"lineLimit": 1
},
{
"type": "text",
"content": "Jun 12",
"fontSize": 9,
"color": "secondaryLabel",
"lineLimit": 1
}
]
},
{
"type": "text",
"content": "$6.49",
"fontSize": 11,
"fontWeight": "bold",
"color": "#3878FA",
"lineLimit": 1
}
]
}
]
},
{
"type": "spacer",
"minLength": 4
},
{
"type": "text",
"content": "+4 more",
"fontSize": 9,
"fontWeight": "bold",
"color": "secondaryLabel",
"lineLimit": 1
}
]
}
}upcoming-payments-empty
Sizes: small, medium, large
small
medium
large
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"padding": 14,
"spacing": 10,
"cornerRadius": 16,
"background": {
"light": "#F2F2F7",
"dark": "#1C1C1E"
},
"children": [
{
"type": "spacer"
},
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "circle",
"fill": "#263878FA",
"size": 48
},
{
"type": "image",
"systemName": "checkmark.circle.fill",
"size": 28,
"color": "#3878FA"
}
]
},
{
"type": "text",
"content": "No upcoming payments",
"fontSize": 13,
"fontWeight": "semibold",
"fontDesign": "rounded",
"color": "secondaryLabel",
"alignment": "center",
"lineLimit": 2
},
{
"type": "spacer"
}
]
},
"medium": {
"type": "vstack",
"padding": 12,
"spacing": 8,
"cornerRadius": 16,
"background": {
"light": "#F2F2F7",
"dark": "#1C1C1E"
},
"children": [
{
"type": "label",
"text": "Upcoming",
"systemName": "calendar.badge.clock",
"fontSize": 11,
"fontWeight": "bold",
"color": "label",
"iconColor": "#3878FA",
"spacing": 4
},
{
"type": "spacer"
},
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "circle",
"fill": "#263878FA",
"size": 40
},
{
"type": "image",
"systemName": "checkmark.circle.fill",
"size": 22,
"color": "#3878FA"
}
]
},
{
"type": "text",
"content": "No upcoming payments",
"fontSize": 12,
"fontWeight": "semibold",
"color": "secondaryLabel",
"alignment": "center",
"lineLimit": 2
},
{
"type": "spacer"
}
]
},
"large": {
"type": "vstack",
"padding": 14,
"spacing": 10,
"cornerRadius": 16,
"background": {
"light": "#F2F2F7",
"dark": "#1C1C1E"
},
"children": [
{
"type": "label",
"text": "Upcoming",
"systemName": "calendar.badge.clock",
"fontSize": 11,
"fontWeight": "bold",
"color": "label",
"iconColor": "#3878FA",
"spacing": 4
},
{
"type": "spacer"
},
{
"type": "zstack",
"alignment": "center",
"children": [
{
"type": "shape",
"shapeType": "circle",
"fill": "#263878FA",
"size": 52
},
{
"type": "image",
"systemName": "checkmark.circle.fill",
"size": 30,
"color": "#3878FA"
}
]
},
{
"type": "text",
"content": "No upcoming payments",
"fontSize": 14,
"fontWeight": "semibold",
"fontDesign": "rounded",
"color": "secondaryLabel",
"alignment": "center",
"lineLimit": 2
},
{
"type": "spacer"
}
]
}
}vstack-spacer
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"spacing": 4,
"padding": 8,
"background": "#111827",
"children": [
{
"type": "text",
"content": "Top",
"fontSize": 14,
"color": "#fff"
},
{
"type": "spacer"
},
{
"type": "text",
"content": "Bottom",
"fontSize": 14,
"color": "#fff"
}
]
}
}weather
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "vstack",
"children": [
{
"type": "text",
"content": "72°",
"fontSize": 36,
"fontWeight": "bold",
"fontDesign": null,
"textStyle": null,
"color": "#fff",
"alignment": null,
"lineLimit": null,
"padding": null,
"background": null,
"cornerRadius": null,
"opacity": null,
"frame": null,
"border": null,
"shadow": null,
"clipShape": null,
"flex": null
},
{
"type": "progress",
"value": 0.7,
"total": 1,
"label": "Humidity",
"tint": "#4CAF50",
"color": null,
"bar_style": null,
"padding": null,
"background": null,
"cornerRadius": null,
"opacity": null,
"frame": null,
"border": null,
"shadow": null,
"clipShape": null,
"flex": null
}
],
"spacing": 8,
"alignment": null,
"padding": 12,
"background": "#1a1a2e",
"cornerRadius": 16,
"opacity": null,
"frame": null,
"border": null,
"shadow": null,
"clipShape": null,
"flex": null
},
"medium": null,
"large": null
}zstack-align
Sizes: small
small
Config JSON
json
{
"version": 1,
"small": {
"type": "zstack",
"alignment": "center",
"background": "#1e293b",
"children": [
{
"type": "shape",
"shapeType": "circle",
"size": 40,
"fill": "#334155"
},
{
"type": "text",
"content": "Z",
"fontSize": 18,
"color": "#fff",
"alignment": "center"
}
]
}
}