Skip to main content
Ring displays a value as a circular arc that fills clockwise from 12 o’clock. A centered label shows the value or any custom text. It shares the same value/min/max/variant API as Progress but takes up less horizontal space, making it ideal for dashboards and status panels.

​
Basic Usage

​
Sizes

Three sizes control the ring diameter: sm (64px), default (96px), and lg (128px).

​
Variants

Semantic variants color the filled arc to communicate meaning at a glance:

​
Thickness

The thickness prop controls the stroke width of the ring arc. The default is 6.

​
Indicator Class

indicator_class applies Tailwind classes directly to the filled arc, just like Progress’s indicator_class targets the bar. The Ring wrapper acts as a group, so group-hover: classes let you trigger effects when hovering anywhere on the ring. Because the Ring arc is an SVG stroke, use stroke-* classes (not bg-*) to override colors.

​
Target Marker

The target prop renders a tick mark on the ring at a specific position. Use target_class to style it.

​
Custom Range

Set min and max to define a range other than 0–100. The renderer normalizes the value to a percentage automatically.

​
Custom Center Content

Use Ring as a container to place arbitrary components in the center. When children are present, they replace the label text.

​
API Reference

Ring Parameters

​
value
float | str
default:"0"
Current value. Can be a template expression for dynamic binding.
​
min
float
default:"0"
Minimum value. The renderer normalizes (value - min) / (max - min) to a 0–100 percentage.
​
max
float
default:"100"
Maximum value.
​
label
str | None
default:"None"
Text displayed in the center of the ring. Supports template expressions. Ignored when children are present.
​
children
list[Component]
default:"[]"
Arbitrary components rendered in the center of the ring, replacing the label.
​
variant
str
default:"default"
Visual variant: "default", "success", "warning", "destructive", "info", "muted".
​
size
str
default:"default"
Ring diameter: "sm" (64px), "default" (96px), "lg" (128px).
​
thickness
float
default:"6"
Stroke width of the ring arc in pixels.
​
target
float | str | None
default:"None"
Target marker position. Renders a tick mark on the ring at this value.
​
indicator_class
str | None
default:"None"
Tailwind classes applied to the filled arc. The Ring wrapper is a group, so group-hover: classes trigger on hover anywhere on the ring.
​
target_class
str | None
default:"None"
Tailwind classes for the target tick mark.
​
css_class
str | None
default:"None"
Tailwind classes for the outer container.

​
Protocol Reference

Ring
{
  "type": "Ring",
  "children?": "[Component]",
  "let?": "object",
  "value?": "number | string",
  "min?": 0,
  "max?": 100,
  "label?": "string",
  "variant?": "default | success | warning | destructive | info | muted",
  "size?": "sm | default | lg",
  "thickness?": 6,
  "indicatorClass?": "string",
  "cssClass?": "string"
}
For the complete protocol schema, see Ring.