[ @sdxc/ui ]

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.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

brand

100

300

500

700

900

roles

success

warning

danger

overlay

shape and size

View code

<div mix={[vstack({ gap: 5, align: "start" })]}>
	<div mix={[vstack({ gap: 2, align: "start" })]}>
		<span mix={[text("xs"), weight("semibold"), fg("neutral.muted")]}>brand</span>
		<div mix={[hstack({ gap: 2, align: "center" })]}>
			{RAMP.map((stop) => (
				<div key={stop.step} mix={[vstack({ gap: 1, align: "center" })]}>
					<ColorSwatch value={stop.value} shape="rounded" size="lg" />
					<span mix={[font("mono"), text("xs"), fg("neutral")]}>{stop.step}</span>
				</div>
			))}
		</div>
	</div>

	<div mix={[vstack({ gap: 2, align: "start" })]}>
		<span mix={[text("xs"), weight("semibold"), fg("neutral.muted")]}>roles</span>
		<div mix={[hstack({ gap: 4, align: "center" })]}>
			{ROLES.map((role) => (
				<div key={role.name} mix={[hstack({ gap: 2, align: "center" })]}>
					<ColorSwatch value={role.value} shape="circle" size="md" />
					<span mix={[font("mono"), text("xs"), fg("neutral")]}>{role.name}</span>
				</div>
			))}
		</div>
	</div>

	<div mix={[vstack({ gap: 2, align: "start" })]}>
		<span mix={[text("xs"), weight("semibold"), fg("neutral.muted")]}>shape and size</span>
		<div mix={[hstack({ gap: 3, align: "center" })]}>
			<ColorSwatch value="#8b5cf6" shape="square" size="sm" />
			<ColorSwatch value="#8b5cf6" shape="rounded" size="md" />
			<ColorSwatch value="#8b5cf6" shape="circle" size="lg" />
		</div>
	</div>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui remix

import "@sdxc/ui/theme.css";

Usage

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

Translucent circle

View code

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

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

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.