# C progress circle 2

> Quota used — colours by threshold

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/c-progress-circle-2).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/c-progress-circle-2
- Screenshot: https://shadcn.exchange/shot/cnippet/c-progress-circle-2/light.png
- Registry item: https://ui.cnippet.dev/r/c-progress-circle-2.json
- Categories: progress circle
- Listed: 2026-10-27, source last changed 2026-10-27

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet/c-progress-circle-2.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/progress-circle`

## Files

### `registry/default/chart-variants/c-progress-circle-2.tsx`

```tsx
"use client";

import { ProgressCircle } from "@/registry/default/charts/progress-circle";

const quotas = [
  { limit: 100, name: "Seats", used: 42 },
  { limit: 1000, name: "API calls (K)", used: 812 },
  { limit: 50, name: "Storage (GB)", used: 48 },
];

// Green below 75%, amber up to 90%, red above.
function thresholdColor(ratio: number) {
  if (ratio >= 0.9) return "var(--destructive)";
  if (ratio >= 0.75) return "var(--warning)";
  return "var(--success)";
}

export default function QuotaThresholds() {
  return (
    <div className="grid w-full max-w-md grid-cols-3 gap-3">
      {quotas.map((q) => {
        const ratio = q.used / q.limit;
        return (
          <div
            className="flex flex-col items-center gap-3 rounded-lg border bg-card p-4"
            key={q.name}
          >
            <ProgressCircle
              aria-label={`${q.name}: ${q.used} of ${q.limit}`}
              color={thresholdColor(ratio)}
              max={q.limit}
              value={q.used}
            >
              {Math.round(ratio * 100)}%
            </ProgressCircle>
            <div className="text-center">
              <div className="font-medium text-sm">{q.name}</div>
              <div className="text-muted-foreground text-xs tabular-nums">
                {q.used} / {q.limit}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}
```