# Pie Gauge

An inline icon that displays a percentage as a pie inside a ring.

---

## Default

`PieGauge` fills clockwise from the top. Pass a `value` from 0 to 100. Values outside this range are clamped; non-finite values render as 0.

```tsx
import { PieGauge } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-wrap items-center gap-6">
      {[0, 25, 50, 75, 100].map((value) => (
        <span className="flex items-center gap-2 text-label-14" key={value}>
          <PieGauge aria-hidden="true" value={value} />
          {value}%
        </span>
      ))}
    </div>
  );
}
```

## Sizes

The default size is 16px. Compact surfaces, such as the build cache summary, use 13px. Use `size` to change both dimensions, or `width` and `height` to set them individually.

```tsx
import { PieGauge } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-wrap items-center gap-6">
      {[13, 16, 24, 32].map((size) => (
        <span className="flex items-center gap-2 text-label-14" key={size}>
          <PieGauge aria-hidden="true" size={size} value={50} />
          50% · {size}px
        </span>
      ))}
    </div>
  );
}
```

## Colors

The icon inherits the surrounding text color by default. Use `color` with a Geist color token for a standalone icon.

```tsx
import { PieGauge } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <span className="flex items-center gap-2 text-label-14 text-gray-900">
        <PieGauge aria-hidden="true" value={50} />
        Inherited · 50%
      </span>
      <span className="flex items-center gap-2 text-label-14">
        <PieGauge aria-hidden="true" color="blue-900" value={50} />
        Blue · 50%
      </span>
      <span className="flex items-center gap-2 text-label-14">
        <PieGauge aria-hidden="true" color="amber-900" value={50} />
        Amber · 50%
      </span>
      <span className="flex items-center gap-2 text-label-14">
        <PieGauge aria-hidden="true" color="red-900" value={50} />
        Red · 50%
      </span>
    </div>
  );
}
```