// Feedback

Circular Progress

Shows task progress with a circular indicator.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/circular-progress

// Usage

1import { CircularProgress, CircularProgressTrack, CircularProgressValue } from "@/components/ui/circular-progress";
2
3<CircularProgress />

// Code

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import {
5  Progress as ArkProgress,
6  useProgressContext,
7} from "@ark-ui/react/progress";
8import type React from "react";
9import { cn } from "@/lib/utils";
10
11export const useCircularProgress = useProgressContext;
12
13interface CircularProgressProps
14  extends React.ComponentProps<typeof ArkProgress.Root>,
15    Pick<CircularProgressTrackProps, "size" | "thickness"> {
16  /**
17   * Shows indeterminate progress.
18   *
19   * @default false
20   */
21  indeterminate?: boolean;
22}
23
24export const CircularProgress = (props: CircularProgressProps) => {
25  const {
26    value,
27    indeterminate = false,
28    size = 32,

// Dependencies

@ark-ui/react