Refined UI

An opinionated, customizable superset of shadcn/ui

AgentsPrimitivesSkillsSkins
Guides
  • Overview
  • Get started
  • Shadcn compatibility
  • Architecture
  • Agent surface
Primitives
  • Accordion
  • Alert
  • Alert dialog
  • Aspect ratio
  • Autocomplete
  • Avatar
  • Badge
  • Button
  • Button group
  • Calendar
  • Card
  • Checkbox
  • Checkbox Group
  • Code
  • Code Diff
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Date Picker
  • Dialog
  • Drawer
  • Empty
  • Field
  • Form
  • Gradient Editor
  • Hover card
  • Input
  • Input group
  • Input OTP
  • Item
  • Kbd
  • Markdown
  • Menu
  • Menubar
  • Meter
  • Native select
  • Navigation menu
  • Number Field
  • Pagination
  • Popover
  • Progress
  • Radio group
  • Resizable
  • Scroll area
  • Select
  • Sidebar
  • Skeleton
  • Slider
  • Spinner
  • Switch
  • Table
  • Table of contents
  • Tabs
  • Textarea
  • Toast
  • Toggle
  • Toolbar
  • Tooltip
  • Tree
  • Trigger Menu
  • Typography
Hooks
  • Use Chat Message
  • Use Chat Input
  • Use User Ask
  • Use Audio Recorder
  • Use Environment Variables
  • Use Copy To Clipboard
  • Use Tool Call
  • Use Sidebar Resize
Utils
  • cn
  • Skin
  • Contracts
  • Serialize
Extensions
  • Control Effects
  • View Transition
  • Send Aurora
  1. Primitives
  3. Color Picker
Primitives

Color Picker

Color input with picker UI, formats, presets, and contrast helpers.

Composition

The preferred shape for composing the installed primitive from its exported parts.

Parts

Exported compound parts from the installed source.

ColorPicker
├── ColorPickerTrigger
├── ColorPickerContent
├── ColorPickerPanel
├── ColorPickerArea
├── ColorPickerAreaThumb
├── ColorPickerHue
├── ColorPickerAlpha
├── ColorPickerWheel
├── ColorPickerInput
├── ColorPickerFormatSelect
├── ColorPickerChannels
├── ColorPickerChannel
├── ColorPickerEyeDropper
├── ColorPickerSwatches
├── ColorPickerSwatch
├── ColorPickerSwatchAdd
├── ColorPickerContrast
└── ColorPickerOutput

The refined source installs this primitive from src/registry/sources/refined/ui/color-picker.tsx. Install it on its own with the command above, or inspect the source below.

Registry command
npx shadcn@latest add http://127.0.0.1:3000/r/refined/color-picker.json
See registry manifest

Installed dependencies

Installed with this primitive because the slot depends on them; they are support files, not standalone sidebar items.

Color enginesrc/registry/lib/color.tsSupport
WCAG contrastsrc/registry/lib/contrast.tsSupport
Color area drag hooksrc/registry/hooks/use-color-area.tsHook
Control variantssrc/registry/sources/refined/control-variants.tsSupport
Surface variantssrc/registry/sources/refined/surface-variants.tsSupport

Raw code

Primary installed primitive source

Color picker slot
src/registry/sources/refined/ui/color-picker.tsx

On this page

  • Preview
  • Composition
  • Installation
  • Dependencies
  • Source
Full panel (popover)
#7038f4
Inline panel
Wheel