Colour picker

Hex colour picker with swatch trigger, popover panel, and text input — built on react-colorful and Radix Popover.

Install

npx shadcn@latest add https://substrate.georgedrury.co.uk/r/colour-picker

Colour

#6366f1

"use client"

import { useState } from "react"

"use client"

import { useState } from "react"

"use client"

import { useState } from "react"

Component	Description
`ColourPicker`	Popover wrapper — renders swatch trigger and picker content in a panel
`ColourPickerContent`	Saturation/hue picker with hex input and preview swatch
`ColourSwatch`	Colour preview button sized `sm` (20px) or `md` (28px)
`ColourInput`	Hex colour text input wrapping `HexColorInput` from react-colorful

Prop	Type	Default	Description
`value`	`string`	—	Current colour, in any CSS format (hex, `oklch()`, `rgb()`, named)
`onChange`	`(colour: string) => void`	—	Called with the new colour as hex
`onStart`	`() => void`	—	Called when a drag or edit begins. Useful for undo snapshots.
`children`	`React.ReactNode`	Swatch	Custom trigger element

Prop	Type	Default	Description
`value`	`string`	—	Current colour, in any CSS format
`onChange`	`(colour: string) => void`	—	Called with the new colour as hex
`onStart`	`() => void`	—	Called when a drag or edit begins

Prop	Type	Default	Description
`colour`	`string`	—	Any CSS colour to display
`size`	`"sm" \| "md"`	`"md"`	Swatch size

Prop	Type	Default	Description
`value`	`string`	—	Current hex colour value
`onChange`	`(colour: string) => void`	—	Called when colour changes