react-hsv-ring

A fully accessible color wheel component for React, following the Radix UI Compound Components pattern.

Screen Shot Example

Features

• Compound Components - Compose your own color picker with full control
• Accessible - Keyboard navigation, ARIA attributes, screen reader support
• Alpha Support - Optional transparency slider
• Copy/Paste - Built-in clipboard functionality
• TypeScript - Full type definitions included
• Unstyled - Bring your own styles or use with Tailwind CSS

Installation

npm install react-hsv-ring

Peer Dependencies: React 18 or 19

Quick Start

import { useState } from 'react'
import * as ColorWheel from 'react-hsv-ring'

function App() {
  const [color, setColor] = useState('#3b82f6')

  return (
    <ColorWheel.Root value={color} onValueChange={setColor}>
      <ColorWheel.Wheel size={200} ringWidth={20}>
        <ColorWheel.HueRing />
        <ColorWheel.HueThumb />
        <ColorWheel.Area />
        <ColorWheel.AreaThumb />
      </ColorWheel.Wheel>
    </ColorWheel.Root>
  )
}

Full Example

import { useState } from 'react'
import * as ColorWheel from 'react-hsv-ring'

function ColorPicker() {
  const [color, setColor] = useState('#3b82f6')

  return (
    <ColorWheel.Root value={color} onValueChange={setColor}>
      <ColorWheel.Wheel size={240} ringWidth={24}>
        <ColorWheel.HueRing />
        <ColorWheel.HueThumb />
        <ColorWheel.Area />
        <ColorWheel.AreaThumb />
      </ColorWheel.Wheel>

      <div className="flex items-center gap-2 mt-3">
        <ColorWheel.Swatch className="w-8 h-8 rounded" />
        <ColorWheel.HexInput className="w-20 px-2 py-1 border rounded" />
        <ColorWheel.CopyButton>Copy</ColorWheel.CopyButton>
        <ColorWheel.PasteButton>Paste</ColorWheel.PasteButton>
      </div>

      <ColorWheel.AlphaSlider className="mt-3" />
    </ColorWheel.Root>
  )
}

Documentation

• Components - All components with props and examples
• Utilities - Color conversion, manipulation, and validation functions
• API Reference - Context hooks, imperative API, and TypeScript types

Live Demo

Explore all components interactively in our Storybook.

License

MIT