This component no longer exists. It was in diceui/base’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-13 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.

circular-progress-demo

diceui-base/circular-progress-demo

RemovedExample

diceui/base publishes no description for this item.

Install it

npx shadcn@latest add https://raw.githubusercontent.com/sadmann7/diceui/HEAD/docs/public/r/styles/base-vega/circular-progress-demo.json

Source

examples/circular-progress-demo.tsxraw.githubusercontent.com/sadmann7/diceui/HEAD/docs/public/r/styles/base-vega/circular-progress-demo.json

1"use client";
2 
3import * as React from "react";
4import {
5  CircularProgress,
6  CircularProgressIndicator,
7  CircularProgressRange,
8  CircularProgressTrack,
9  CircularProgressValueText,
10} from "@/registry/bases/base/ui/circular-progress";
11 
12export default function CircularProgressDemo() {
13  const [value, setValue] = React.useState(0);
14 
15  React.useEffect(() => {
16    const interval = setInterval(() => {
17      setValue((prev) => {
18        if (prev >= 100) {
19          clearInterval(interval);
20          return 100;
21        }
22        return prev + 2;
23      });
24    }, 150);
25    return () => clearInterval(interval);
26  }, []);
27 
28  return (
29    <CircularProgress value={value} size={60}>
30      <CircularProgressIndicator>
31        <CircularProgressTrack />
32        <CircularProgressRange />
33      </CircularProgressIndicator>
34      <CircularProgressValueText />
35    </CircularProgress>
36  );
37}

What it pulls in

Other registry items

circular-progress

Files it writes

examples/circular-progress-demo.tsx