Getting Started

// app/layout.tsx (Next.js) or pages/_app.tsx or index.tsx
import 'react-beautiful-color/dist/react-beautiful-color.css';

import { ColorPicker, useColorState } from 'react-beautiful-color';

function App() {
  const { color, setColor } = useColorState({ type: 'hex', value: '#3b82f6' });

  return (
    <ColorPicker color={{ type: 'hex', value: color.hex }} onChange={setColor}>
      <ColorPicker.Saturation className="flex-1 mb-3" />
      
      <div className="flex items-center gap-3 p-3 pt-0">
        <ColorPicker.EyeDropper />
        
        <div className="flex-1 flex flex-col gap-3">
          <ColorPicker.Hue className="h-4" />
          <ColorPicker.Alpha className="h-4" />
        </div>
      </div>
    </ColorPicker>
  );
}