Future UI

Color Picker

◈ Inputs

Neumorphic color picker with hue wheel, shade slider, and hex/RGB inputs.

colorpickerinputwheelneumorphic

No preview available

Controls

#ff795b
200

Inputs / React Component

About Color Picker

Neumorphic color picker with hue wheel, shade slider, and hex/RGB inputs.

Category Inputs
Framework React + TypeScript
Dependencies @uiw/react-color-wheel, @uiw/react-color-shade-slider, @uiw/react-color-alpha, @uiw/color-convert
Tags color, picker, input, wheel, neumorphic

Install Color Picker in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/color-picker.json?key=YOUR_LICENSE_KEY"

Usage example

import { ColorPicker } from './ColorPicker';
import { useState } from 'react';

export default function Example() {
  const [color, setColor] = useState('#8b5cf6');

  return (
    <ColorPicker
      value={color}
      onChange={setColor}
      showAlpha={true}
      wheelSize={200}
      presets={['#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6']}
    />
  );
}