Colors

Color primitives — a click-to-copy swatch and an inline flower-wheel color picker.

Sizes

Brand

Click any swatch to copy its hex code to the clipboard.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/color-swatch.json https://sdk-components.thesqd.com/r/color-picker.json

Usage

`ColorSwatch` is a click-to-copy chip. `ColorPicker` is an inline swatch + hex pill that opens a flower-wheel popover (petals = hue/saturation, curved arc = lightness).

TSImport

import { ColorSwatch } from "@/components/ui/color-swatch";
import { ColorPicker } from "@/components/ui/color-picker";

TSExample

import * as React from "react";
import { ColorPicker } from "@/components/ui/color-picker";

export function Example() {
  const [color, setColor] = React.useState("#F5B81E");
  // Pass label/caption/error for the uniform field shell shared with
  // DurationInput / FileSizeInput.
  return <ColorPicker value={color} onChange={setColor} />;
}

Composition

Anatomy of the color primitives.

ColorSwatch (button)
└── visual chip — copies hex on click by default

ColorPicker (inline display/edit field — same h-9 rounded-md cards as DurationInput / FileSizeInput)
├── Swatch card — click to grow the flower wheel out of its centre
├── Hex card — display mode: #HEX + ✏️ → edit mode: hex input card + ✓ commit card
└── Wheel panel (portaled to <body>, scales up from the swatch centre)
    └── Flower wheel
        ├── Tinted plate + petal rings (12 saturated + 8 softer hues)
        ├── Center petal — live color preview, click to confirm + close
        ├── Curved lightness arc (white → hue → black) with draggable thumb
        └── Hex readout of the live selection — click to copy

Swatches

`ColorSwatch` ships three sizes — `sm`, `default`, `lg` — and copies its hex on click by default. Pass `copyOnClick={false}` for purely decorative use.

Sizes

Brand

Click any swatch to copy its hex code to the clipboard.

Palette table

Brand color palette presented as a DataGrid with swatch / hex / category columns.

Swatch	Hex Code	Category
	#341756	Primary
	#F9635D	Primary
	#513DE5	Primary
	#A960FF	Primary
	#F2AF39	Primary
	#CC4291	Primary
	#BCB3F9	Secondary
	#DEC1FF	Secondary
	#EB8EC3	Secondary
	#FFDB9B	Secondary
	#FFA8A4	Secondary
	#FFB48B	Secondary

Color picker

`ColorPicker` is an inline swatch + hex pill built from the same `h-9 rounded-md` cards as `DurationInput` and `FileSizeInput`. The pill flips into an editable hex input with a ✓ to commit; the swatch is a `Popover` trigger that opens the flower-wheel panel (via the shared Popover primitive) — petal rings set hue/saturation, the curved arc sets lightness, and a small read-only hex readout shows the live selection. Drives a controlled hex string via `value` / `onChange`.

Click the swatch to open the flower wheel — petals set hue and saturation, the curved arc sets lightness. Click the hex pill to type a value, then ✓ to commit.

API Reference

Props exposed by ColorSwatch and ColorPicker.

ColorSwatch

Prop	Type	Default	Description
`color`	string	—	Any CSS color value (hex, rgb, hsl, or a named color).
`size`	"sm" \| "default" \| "lg"	"default"	Visual footprint of the chip.
`copyOnClick`	boolean	true	Copies the hex value to the clipboard on click and shows a toast.
`label`	string	—	Accessible label override — falls back to the `color` value.

ColorPicker

Prop	Type	Default	Description
`value`	string	—	Controlled hex color value (e.g. `#F5B81E`).
`defaultValue`	string	"#513DE5"	Uncontrolled initial hex value.
`onChange`	(value: string) => void	—	Fires whenever a petal, the lightness arc, or a committed hex edit updates the color.
`disabled`	boolean	—	Disables the swatch, pill, and wheel.
`label / caption / error / required`	ReactNode / boolean	—	Uniform field shell shared with DurationInput and FileSizeInput.