ColorWheel

An interactive circular color wheel for selecting hue values. Supports keyboard operation, touch input, and precise control, ideal for building comprehensive color pickers.

Basic Usage

"use client";

import { parseColor } from "react-aria-components";
import { ColorWheel } from "@repo/ui/components/color-wheel";

/* BASIC COLOR WHEEL EXAMPLE */
export const Example1: React.FC = () => {
    return <ColorWheel defaultValue={parseColor("hsl(30, 100%, 50%)")} />;
};

Controlled

Use the value and onChange props to control the color value.

#00FFFF

Hue: 180°

"use client";

import { useState } from "react";
import { parseColor } from "react-aria-components";
import { ColorWheel } from "@repo/ui/components/color-wheel";

/* CONTROLLED COLOR WHEEL WITH VALUE DISPLAY */
export const Example2: React.FC = () => {
    const [color, setColor] = useState(parseColor("hsl(180, 100%, 50%)"));

    return (
        <div className="flex items-center gap-6">
            <ColorWheel value={color} onChange={setColor} />
            <div className="flex items-center gap-3">
                <div
                    className="size-12 rounded-md border shadow-sm"
                    style={{ backgroundColor: color.toString("css") }}
                />
                <div className="text-sm">
                    <p className="font-mono font-medium">
                        {color.toString("hex")}
                    </p>
                    <p className="text-muted-foreground font-mono">
                        Hue: {Math.round(color.getChannelValue("hue"))}°
                    </p>
                </div>
            </div>
        </div>
    );
};

Disabled

"use client";

import { parseColor } from "react-aria-components";
import { ColorWheel } from "@repo/ui/components/color-wheel";

/* DISABLED COLOR WHEEL */
export const Example3: React.FC = () => {
    return (
        <ColorWheel
            defaultValue={parseColor("hsl(200, 100%, 50%)")}
            isDisabled
        />
    );
};

Component Code

"use client";
import {
    ColorWheel as AriaColorWheel,
    ColorWheelProps as AriaColorWheelProps,
    ColorWheelTrack,
} from "react-aria-components";
import { ColorThumb } from "@repo/ui/components/color-thumb";

export interface ColorWheelProps
    extends Omit<AriaColorWheelProps, "outerRadius" | "innerRadius"> {
    outerRadius?: number;
    innerRadius?: number;
}

export const ColorWheel: React.FC<ColorWheelProps> = ({
    outerRadius = 100,
    innerRadius = 75,
    ...props
}) => {
    return (
        <AriaColorWheel
            data-slot="color-wheel"
            outerRadius={outerRadius}
            innerRadius={innerRadius}
            {...props}
        >
            <ColorWheelTrack
                className="data-disabled:bg-muted"
                style={({ defaultStyle, isDisabled }) => ({
                    ...defaultStyle,
                    background: isDisabled
                        ? undefined
                        : defaultStyle.background,
                })}
            />
            <ColorThumb />
        </AriaColorWheel>
    );
};

Basic Usage

Controlled

Disabled

Component Code

On this page