103 Pro components and page blocks

Get Pro
uibrik

Swatch Picker

Pro

Preview

Customize

Colors
Selected2

Installation

Pro

Swatch Picker is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/swatch-picker

Usage

import { SwatchPicker } from "@/components/uibrik/swatch-picker/swatch-picker";​const colors = ["#1d1d1f", "#e3e4e5", "#0071e3", "#34c759", "#ff9f0a", "#ff375f", "#bf5af2"];​const swatches = [  { name: "Graphite", hex: "#1d1d1f" },  { name: "Silver", hex: "#e3e4e5" },  // …5 more];​<SwatchPicker  colors={colors}  defaultIndex={2}  swatches={swatches}  onChange={(swatch) => {}}/>

Props

SwatchPicker
colors
Type string[]
["#1d1d1f","#e3e4e5","#0071e3","#34c759","#ff9f0a","#ff375f","#bf5af2"]
The starting row of colours.
defaultIndex
Type number
2
Which colour starts selected.
swatches
Type { name, hex, alpha? }[]
–
The starting row. name labels each dot for screen readers; alpha (0–1) shows over a checkerboard. Defaults to seven Apple-style colours.
onChange
Type (swatch: { name, hex, alpha }) => void
–
Called whenever the selected colour changes: picked, typed, edited in the panel or removed.
className
Type string
–
Classes for the card.