Swatch palette
Grid of colour swatches for quick selection. Pairs with ColourPicker.
Install
npx shadcn@latest add https://substrate.georgedrury.co.uk/r/swatch-paletteExamples
Default
#3b82f6
"use client"
import { useState } from "react"Props
| Prop | Type | Default | Description |
|---|---|---|---|
colours | string[] | — | Array of hex colour strings |
value | string | — | Currently selected colour |
onSelect | (colour: string) => void | — | Called when a swatch is clicked |
columns | number | 8 | Grid column count |
Presets
Two built-in palettes are exported for convenience:
import {
MATERIAL_COLOURS,
TAILWIND_COLOURS,
} from "@/components/substrate/swatch-palette"