# Swatch


## Anatomy

```tsx
import { Swatch } from "chroma-panel";
```

<Callout variant="note" title="Only inside a panel">
  This is one of the parts the built-in modes are made of. It reads the colour
  through `usePanel()`, so it only works inside a `ChromaPanel` — typically in a
  [custom mode](/react/modes/custom). For a picker outside the panel, use [the
  store and hooks](/react/utils/use-color-store).
</Callout>

## API reference

### Props

<PropsTable name="Swatch" />