81 Pro components and page blocks

Get Pro
uibrik

Color Picker

Pro

Preview

Customize

Inline
Hex

Installation

Pro

Color 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/color-picker

Usage

import { ColorPicker } from "@/components/uibrik/color-picker/color-picker";​const swatches = ["#0a0a0a", "#737373", "#e5e5e5", "#ef4444", "#f97316", "#eab308", "#22c55e", "#14b8a6", "#3b82f6", "#6366f1", "#a855f7", "#ec4899"];​<ColorPicker  mode="inline"  alpha  defaultFormat="hex"  eyeDropper  disabled={false}  swatches={swatches}  onChange={(hex, { r, g, b, a }) => {}}  onChangeEnd={(hex, { r, g, b, a }) => {}}  // value="…"  // defaultValue="…"  // side="bottom"  // open={false}  // onOpenChange={(open) => {}}  // label="…"/>

Props

ColorPicker
mode
Type "inline" | "popover"
"inline"
An inline panel, or a swatch button that opens it.
alpha
Type boolean
true
An opacity strip. Values below 100% give 8-digit hex.
defaultFormat
Type "hex" | "rgb" | "hsl" | "oklch"
"hex"
Format the text field starts in.
eyeDropper
Type boolean
true
Pick from the screen, in browsers that support it.
disabled
Type boolean
false
Ignore input.
value / defaultValue
Type string
"#3b82f6"
Hex colour, #rrggbb or #rrggbbaa.
onChange
Type (hex, { r, g, b, a }) => void
–
Fires as the colour changes, while dragging too.
onChangeEnd
Type (hex, { r, g, b, a }) => void
–
Fires once a drag ends or a value is committed.
swatches
Type string[]
–
Preset hex colours.
side
Type "bottom" | "top"
"bottom"
Popover side. Flips when there isn't room.
open / onOpenChange
Type boolean / (open) => void
–
Controlled popover state.
label
Type string
"Colour"
Names the picker for screen readers.
className
Type string
–
Classes for the panel or the trigger.