ColorWheel

PreviousNext
Docs
react-ariaui

Preview

Loading preview…
components/ui/ColorWheel.tsx
'use client';
import {
  ColorWheel as AriaColorWheel,
  ColorWheelProps as AriaColorWheelProps,
  ColorWheelTrack
} from 'react-aria-components';

import {ColorThumb} from '@/registry/react-aria/ui/ColorThumb';

import './ColorWheel.css';
export interface ColorWheelProps
  extends Omit<AriaColorWheelProps, 'outerRadius' | 'innerRadius'> {}

export function ColorWheel(props: ColorWheelProps) {
  return (
    (
      <AriaColorWheel {...props} outerRadius={100} innerRadius={74}>
        <ColorWheelTrack />
        <ColorThumb />
      </AriaColorWheel>
    )
  );
}

Installation

npx shadcn@latest add @react-aria/css-colorwheel

Usage

import { CssColorwheel } from "@/components/ui/css-colorwheel"
<CssColorwheel />