ColorSwatch

A named sample of an opaque RGB color.

Preview

SizeValue

Use ColorSwatch

ColorSwatch is a named export of @flood-md/react. Connect the package once, then import what you use.

PackageProject UI

"use client";

import { FloodRoot, ColorSwatch } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <ColorSwatch label="Flood pink" value="#ff47a8" />
    </FloodRoot>
  );
}

Design notes

Opaque RGB colors only; keep a text label wherever color conveys meaning.

API reference

Prop	Values	Default
`value`	string	Required
`label`	string	Required
`size`	"sm" \| "md" \| "lg"	—
`Native HTML props`	Omit<HTMLAttributes<HTMLSpanElement>, "children" \| "color">	Forwarded

View TypeScript source

Page Markdown Agent skill