ColourSwatch
Visual swatch displaying a single colour with optional label and copy-on-click behaviour.
Examples
Single swatch
A single branded colour with its hex value.
brand-base
Palette row
Full brand palette rendered as a horizontal swatch strip.
With labels
Swatches with token name and resolved hex side by side.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { ColourSwatch } from "@rokle/components";import { ColourSwatch } from "@rokle/components";
export function Example() {
return <ColourSwatch />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| colour | string | - | CSS colour value to display. |
| label | string | - | Colour name or token label. |
| copyable | boolean | false | Copy colour value to clipboard on click. |