# ColorSwatch

> A static preview box rendering one color value as a filled, shaped swatch, backed by a fixed checkerboard so a translucent value always reads correctly against whatever sits behind it on the page rather than blending invisibly away.

```ts
import { ColorSwatch } from "@sdxc/ui";
```

Renders a fixed-size `<span>` that paints `value` through a local
`--ui-color-swatch-value` custom property, layered over a `::before`
checkerboard so any transparency in `value` reads correctly.

## Examples

```tsx
<ColorSwatch value="#3b82f6" />
```

```tsx
<ColorSwatch value="rgb(16 185 129 / 0.4)" shape="circle" size="lg" />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `value` | `string` | The color to preview, already resolved to a literal CSS value — a hex string, `rgb()`/`hsl()`/`oklch()` function, or named color. Required, since a swatch with nothing to preview has no reason to render. |
| `shape?` | `"circle" \| "square" \| "rounded"` | Shape variant. Defaults to DEFAULT_SHAPE. |
| `size?` | `"sm" \| "md" \| "lg"` | Size variant. Defaults to DEFAULT_SIZE. |

Also accepts everything in `TagProps<"span">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Shape` | `"circle" \| "square" \| "rounded"` | Shape variant controlling the swatch's corner rounding: `"circle"` renders a fully rounded disc, `"square"` renders sharp corners, and `"rounded"` renders a softly rounded square. |
| `Size` | `"sm" \| "md" \| "lg"` | Size variant controlling the swatch's rendered dimensions. |