tauri-plugin-widgets

Appearance

Data ​

Progress, gauges, charts, and lists.

progress ​

Tier: core

Linear or circular progress indicator.

progress (fitness.medium)

From showcase preset — case fitness.medium.

Properties ​

PropertyTypeDefaultDescription
backgroundBackgroundValue—Solid, adaptive, or gradient background.
barStyleProgressStyle—linear (default) or circular.
borderBorderConfig—Border color and width.
clipShapeClipShape—Clip content to a shape (e.g. circle avatar from square image).
colorColorValue—Track / label color.
cornerRadiusnumber—Corner radius in points.
flexnumber—Layout weight for flexible sizing inside stacks (like Android layout_weight).
frameFrameConfig—Explicit width / height / max constraints.
labelstring—Caption above the bar. Always set on Android so hosts never show null.
opacitynumber—Opacity from 0 (invisible) to 1 (opaque).
paddingPaddingValue—Inset padding (number or per-edge object).
shadowShadowConfig—Drop shadow.
tintColorValue—Accent / fill color for the completed portion.
totalnumber1Denominator for the ratio. Default 1.0.
valuenumber—Current value. Clamped to 0..=total by renderers.

Examples ​

Minimal ​

json
{
  "type": "progress",
  "value": 0.7,
  "total": 1,
  "tint": "#4CAF50",
  "color": "secondaryLabel",
  "label": "Humidity",
  "barStyle": "linear"
}

From showcase fitness.medium ​

json
{
  "type": "progress",
  "value": 0.45,
  "tint": "#4ecdc4",
  "label": "Calories",
  "color": "#94a3b8"
}

From showcase fitness.small ​

json
{
  "type": "progress",
  "value": 0.45,
  "tint": "#4ecdc4",
  "label": "Cal",
  "color": "#94a3b8"
}

Inside a WidgetConfig ​

json
{
  "small": {
    "type": "progress",
    "value": 0.7,
    "total": 1,
    "tint": "#4CAF50",
    "color": "secondaryLabel",
    "label": "Humidity",
    "barStyle": "linear"
  }
}

gauge ​

Tier: extended

Circular or capacity-style gauge.

gauge (fitness.medium)

From showcase preset — case fitness.medium.

Properties ​

PropertyTypeDefaultDescription
backgroundBackgroundValue—Solid, adaptive, or gradient background.
borderBorderConfig—Border color and width.
clipShapeClipShape—Clip content to a shape (e.g. circle avatar from square image).
colorColorValue—Secondary / track color.
cornerRadiusnumber—Corner radius in points.
currentValueLabelstring—Text shown for the current value (e.g. "72%").
flexnumber—Layout weight for flexible sizing inside stacks (like Android layout_weight).
frameFrameConfig—Explicit width / height / max constraints.
gaugeStyleGaugeStyle—Visual style (e.g. circular).
labelstring—Optional caption.
maxnumber—Upper bound. Default 1.
minnumber—Lower bound. Default 0.
opacitynumber—Opacity from 0 (invisible) to 1 (opaque).
paddingPaddingValue—Inset padding (number or per-edge object).
shadowShadowConfig—Drop shadow.
tintColorValue—Accent color.
valuenumber—Current value within [min, max].

Examples ​

Minimal ​

json
{
  "type": "gauge",
  "value": 0.72,
  "min": 0,
  "max": 1,
  "label": "CPU",
  "currentValueLabel": "72%",
  "tint": "#38bdf8",
  "gaugeStyle": "circular"
}

From showcase fitness.medium ​

json
{
  "type": "gauge",
  "value": 0.72,
  "min": 0,
  "max": 1,
  "currentValueLabel": "72%",
  "label": "Steps",
  "gaugeStyle": "circular",
  "tint": "#ff6b6b"
}

From showcase gauge-square.small ​

json
{
  "type": "gauge",
  "value": 0.72,
  "min": 0,
  "max": 1,
  "label": "CPU",
  "currentValueLabel": "72%",
  "tint": "#7aa2f7",
  "gaugeStyle": "circular"
}

Inside a WidgetConfig ​

json
{
  "small": {
    "type": "gauge",
    "value": 0.72,
    "min": 0,
    "max": 1,
    "label": "CPU",
    "currentValueLabel": "72%",
    "tint": "#38bdf8",
    "gaugeStyle": "circular"
  }
}

chart ​

Tier: extended

Bar, line, area, or pie chart.

chart (chart-mix.medium)

From showcase preset — case chart-mix.medium.

Properties ​

PropertyTypeDefaultDescription
backgroundBackgroundValue—Solid, adaptive, or gradient background.
borderBorderConfig—Border color and width.
chartDataChartDataPoint[]—Data points (label + value, optional per-point color).
chartTypeany—Chart kind: bar, line, area, or pie.
clipShapeClipShape—Clip content to a shape (e.g. circle avatar from square image).
cornerRadiusnumber—Corner radius in points.
flexnumber—Layout weight for flexible sizing inside stacks (like Android layout_weight).
frameFrameConfig—Explicit width / height / max constraints.
opacitynumber—Opacity from 0 (invisible) to 1 (opaque).
paddingPaddingValue—Inset padding (number or per-edge object).
shadowShadowConfig—Drop shadow.
tintColorValue—Default series tint.

Examples ​

Minimal ​

json
{
  "type": "chart",
  "chartType": "bar",
  "tint": "#38bdf8",
  "chartData": [
    {
      "label": "Mon",
      "value": 120
    },
    {
      "label": "Tue",
      "value": 90
    },
    {
      "label": "Wed",
      "value": 150
    }
  ]
}

From showcase chart-mix.medium ​

json
{
  "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"
    }
  ]
}

Inside a WidgetConfig ​

json
{
  "small": {
    "type": "chart",
    "chartType": "bar",
    "tint": "#38bdf8",
    "chartData": [
      {
        "label": "Mon",
        "value": 120
      },
      {
        "label": "Tue",
        "value": 90
      },
      {
        "label": "Wed",
        "value": 150
      }
    ]
  }
}

list ​

Tier: extended

Collection list of rows (text, optional checked marker and action).

list (android-list.large)

From showcase preset — case android-list.large.

Properties ​

PropertyTypeDefaultDescription
backgroundBackgroundValue—Solid, adaptive, or gradient background.
borderBorderConfig—Border color and width.
clipShapeClipShape—Clip content to a shape (e.g. circle avatar from square image).
colorColorValue—Row text color.
cornerRadiusnumber—Corner radius in points.
flexnumber—Layout weight for flexible sizing inside stacks (like Android layout_weight).
fontSizenumber—Row text font size.
frameFrameConfig—Explicit width / height / max constraints.
itemsListItem[]—Row items.
opacitynumber—Opacity from 0 (invisible) to 1 (opaque).
paddingPaddingValue—Inset padding (number or per-edge object).
shadowShadowConfig—Drop shadow.
spacingnumber—Space between rows (points).

Examples ​

Minimal ​

json
{
  "type": "list",
  "spacing": 4,
  "fontSize": 14,
  "items": [
    {
      "text": "Alpha",
      "checked": true,
      "action": "row",
      "payload": "a"
    },
    {
      "text": "Beta",
      "checked": false,
      "action": "row",
      "payload": "b"
    },
    {
      "text": "Gamma"
    }
  ]
}

From showcase android-list.large (size root) ​

json
{
  "type": "list",
  "items": [
    {
      "text": "Alpha",
      "checked": true,
      "action": "row",
      "payload": "a"
    },
    {
      "text": "Beta",
      "checked": false,
      "action": "row",
      "payload": "b"
    },
    {
      "text": "Gamma"
    }
  ],
  "spacing": 2,
  "fontSize": 14
}

From showcase list-20-items.large (size root) ​

json
{
  "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"
    }
  ]
}

Inside a WidgetConfig ​

json
{
  "small": {
    "type": "list",
    "spacing": 4,
    "fontSize": 14,
    "items": [
      {
        "text": "Alpha",
        "checked": true,
        "action": "row",
        "payload": "a"
      },
      {
        "text": "Beta",
        "checked": false,
        "action": "row",
        "payload": "b"
      },
      {
        "text": "Gamma"
      }
    ]
  }
}

Released under the MIT License. · Contributing

Copyright © s00d