1

Blossom Picker

A blossom-style color picker with 3 variants: petal-only, petals with arc lightness slider, and an animated ring picker with spring-physics cursor repulsion.

Dependencies

motion

Interaction Type

Click the center flower core button to expand/collapse with tactile click audio. Hover petals for micro-clicks and click petals or dots to select colors. Drag the arc slider for real-time audio ticks.

Props

Options you can pass to customize this component.

Prop
Type
Description
variant
'blossom' | 'blossom-arc' | 'ring'

Picker style. blossom = petals only, blossom-arc = petals + arc slider, ring = animated dot ring.

value
BlossomColorPickerValue

Controlled color value for the picker.

defaultValue
BlossomColorPickerValue

Initial color value for uncontrolled usage.

colors
ColorInput[]

Custom color palette. Accepts hex strings or {h, s, l} objects.

onChange
(color: BlossomColorPickerColor) => void

Called with the full color object when a color is selected or adjusted.

onCollapse
(color: BlossomColorPickerColor) => void

Called with the current color when the picker collapses.

disabled
boolean

Disables all interactions.

openOnHover
boolean

Expands the picker on mouse hover instead of click.

initialExpanded
boolean

Starts the picker in expanded state.

animationDuration
number

Duration of expand/collapse animations in ms.

showAlphaSlider
boolean

Shows the arc slider for lightness adjustment.

coreSize
number

Size of the core button in pixels.

petalSize
number

Size of each petal in pixels.

collapsible
boolean

Whether the picker can be collapsed.

className
string

Additional CSS classes for the root element.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/color-picker.json

How to use

import { BlossomPicker } from "@/components/ui/color-picker-standalone"

export function Demo() {
  return (
    <div className="flex gap-8">
      <BlossomPicker variant="blossom" initialExpanded coreSize={48} petalSize={48} />
      <BlossomPicker variant="blossom-arc" initialExpanded coreSize={48} petalSize={48} />
    </div>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Credits

Original implementation inspired by blossom color picker patterns.

Keep in mind

All components here are original implementations, built from scratch with no copied code, assets, or content. We study UI/UX patterns we admire and craft our own versions, often with added features. If your work inspired something here and isn't credited, or a credit is incomplete, please open an issue - we'll fix it promptly.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/color-picker.json