ColorList

ColorList renders accessible color buttons and can display the current selection with a checkmark.

Live Editor

function ColorListExample() {
  const [color, setColor] = React.useState("var(--color-primary)");
  const colors = [
    "var(--color-primary)",
    "var(--color-secondary)",
    "var(--color-accent)",
    "var(--color-danger)",
  ];

  return (
    <div className="grid gap-4">
      <ColorList
        title="Color"
        colors={colors}
        canCheck
        orientation="horizontal"
        onColorSelect={setColor}
      />
      <span className="text-sm text-muted-foreground">Selected: {color}</span>
    </div>
  );
}

Result

Loading...

import { ColorList } from "niom-parts";

<ColorList
  title="Color"
  colors={["#38bdf8", "#a78bfa", "#34d399"]}
  canCheck
  onColorSelect={setColor}
/>

Common use cases

Swatches can represent product variants, brand palettes, or any small set of CSS colors.

Live Editor

function ColorListUseCases() {
  const [productColor, setProductColor] = React.useState("#111827");
  const [brandColor, setBrandColor] = React.useState("#0ea5e9");

  return (
    <div className="grid w-full gap-7 sm:grid-cols-2">
      <div className="grid content-start gap-3">
        <ColorList
          title="Phone finish"
          colors={["#111827", "#e5e7eb", "#86efac", "#fda4af"]}
          canCheck
          orientation="horizontal"
          onColorSelect={setProductColor}
        />
        <span className="text-sm text-muted-foreground">Selected: {productColor}</span>
      </div>
      <ColorList
        title={`Brand palette: ${brandColor}`}
        colors={["#0ea5e9", "#14b8a6", "#f59e0b"]}
        orientation="vertical"
        onColorSelect={setBrandColor}
      />
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default
title	string	required
colors	string[]	required
onColorSelect	(color: string) => void	required
canCheck	boolean	false
orientation	"horizontal" | "vertical"	-
className	string	-
badgeClassName	string	-