Getting Started
Install and set up react-beautiful-color in your React project
Installation
npm install react-beautiful-color yarn add react-beautiful-color pnpm add react-beautiful-color bun add react-beautiful-color Setup
Add CSS to your layout file:
// app/layout.tsx (Next.js) or pages/_app.tsx or index.tsx
import 'react-beautiful-color/dist/react-beautiful-color.css';Basic Usage
import { ColorPicker, useColorState } from 'react-beautiful-color';
function App() {
const [{ colorInput, colorState }, setColor] = useColorState({ type: 'hex', value: '#3b82f6' });
return (
<ColorPicker color={colorInput} 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>
);
}import { useState } from 'react';
import { ColorPicker, Color } from 'react-beautiful-color';
function App() {
const [color, setColor] = useState(new Color({ type: 'hex', value: '#3b82f6' }));
return (
<ColorPicker color={color} 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>
);
}Key Features
- 🧩 Compound Components - Compose your own layout
- 🎨 Beautiful Design - Clean, modern UI
- ⚡ Smart Hook - Format preservation with instant conversions
- 🛡️ Type-Safe API - Full TypeScript support
- 🪶 Lightweight - Pure Tailwind CSS, no dependencies
Next Steps
- Learn about ColorPicker component
- Explore useColorState hook
- Check individual components: Saturation, Hue, Alpha