Ring
Ring displays progress or status in a circular indicator.
Source
LLM docs
Package
Examples
3
Properties
53
Playground
Basics
Drive multiple ring presentations from a single stateful value and expose how sizing and labels adapt.
Loading demo…
import { useState } from 'react';
import { Block, Button, Ring, Row } from '@plocks/ui';
export function Demo() {
const [value, setValue] = useState(72);
return (
<Block align="center" gap="md">
<Row gap="lg" align="center">
<Ring value={value} caption="Completion" />
<Ring value={value} size={72} thickness={8} caption="Compact" />
</Row>
<Row gap="sm">
<Button variant="outline" onPress={() => setValue(Math.max(0, value - 10))}>
-10%
</Button>
<Button onPress={() => setValue(Math.min(100, value + 10))}>+10%</Button>
</Row>
</Block>
);
}Dynamic Color Stops
Display how
colorStops shift the progress color as values cross threshold ranges.Loading demo…
import { Ring, Row } from '@plocks/ui';
const colorStops = [
{ value: 0, color: '#f87171' },
{ value: 60, color: '#f59e0b' },
{ value: 90, color: '#14b8a6' },
];
export function Demo() {
return (
<Row gap="lg" justify="center" wrap="wrap">
{[48, 72, 97].map((value) => (
<Ring key={value} value={value} colorStops={colorStops} caption={`${value}%`} />
))}
</Row>
);
}Custom Center Content
Showcase the render-prop API for injecting icons, text, or status badges inside the ring.
Loading demo…
import { Block, Icon, Ring, Row, Text } from '@plocks/ui';
export function Demo() {
return (
<Row gap="lg" justify="center" wrap="wrap">
<Ring value={86} caption="Pipeline">
{({ percent }) => (
<Block align="center">
<Icon name="rocket" size="lg" color="primary" />
<Text fw="700">{Math.round(percent)}%</Text>
</Block>
)}
</Ring>
<Ring value={0} neutral caption="Design system">
<Block align="center">
<Icon name="clock" size="lg" color="gray" />
<Text size="xs" c="secondary">
On hold
</Text>
</Block>
</Ring>
</Row>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources