HexSwatch
Color swatch that displays a hex value as docs data. Used in design-system reference pages where the hex IS the content, not a styling literal.
Preview
Usage
import { HexSwatch } from '@ramtt/ui'
<HexSwatch token="--bg" hex="#FAF9F5" label="Canvas" usage="Page background" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| hex* | string | — | The hex value to display (passed as data, not styling) |
| token | string | — | Optional token name shown above the swatch (e.g. "--n50") |
| label | string | — | Optional label shown below the hex |
| usage | string | — | Optional usage description |
| size | number | 56 | Swatch size in px |