A lightweight, framework-agnostic color picker for React. Zero dependencies. Customizable.
~4.37 kB gzipped, no runtime dependencies except React.
Works with React, Preact, Next.js, Remix, and more.
Full type definitions for seamless TypeScript integration.
Tailwind CSS styles, compatible with Bootstrap or custom CSS.
Includes HueSlider, SaturationPicker, and HexInput components.
Keyboard navigation and mobile-friendly design.
import React, { useState } from "react";
import { ColorPicker } from "react-color-pro";
const App = () => {
const [color, setColor] = useState("#14AE88");
return (
<div className="p-6">
<h2>🎨 Pick a Color</h2>
<ColorPicker value={color} onChange={setColor} />
<p className="mt-4">Selected Color: <span style={{ color }}>{color}</span></p>
</div>
);
};
export default App;A simple React implementation with a color picker and live preview.
/** @jsx h */
import { h } from "preact";
import { useState } from "preact/hooks";
import { ColorPicker } from "react-color-pro";
export default function PreactApp() {
const [color, setColor] = useState("#14AE88");
return (
<div>
<ColorPicker value={color} onChange={setColor} />
<p>Color: {color}</p>
</div>
);
}Lightweight Preact setup with a dynamic color picker.
<!-- resources/views/color-picker.blade.php -->
<div id="color-picker-root"></div>
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-color-pro/dist/react-color-pro.umd.js"></script>
<script>
const { ColorPicker } = window.ReactColorPro;
const e = React.createElement;
ReactDOM.render(
e(ColorPicker, { value: "#14AE88", onChange: (val) => console.log(val) }),
document.getElementById("color-picker-root")
);
</script>Integrate via CDN for Laravel Blade templates with ease.
<div id="picker-container"></div>
<!-- Load via CDN -->
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-color-pro/dist/react-color-pro.umd.js"></script>
<script>
const { ColorPicker } = ReactColorPro;
ReactDOM.render(
React.createElement(ColorPicker, {
value: "#14AE88",
onChange: (value) => console.log("Color:", value),
}),
document.getElementById("picker-container")
);
</script>Simple HTML integration without any framework dependencies.
<ColorPicker
value={color}
onChange={setColor}
className="border p-4 rounded-lg shadow-lg"
/>Seamlessly style with Tailwind CSS for a custom look.
<div className="card p-3">
<h5 className="mb-3">Pick a Color</h5>
<ColorPicker value={color} onChange={setColor} />
</div>Integrate with Bootstrap for a card-based design.
| Method | Recommended For | Example |
|---|---|---|
| **NPM** | React / Preact / Next.js apps | npm install react-color-pro |
| **CDN** | Laravel / WordPress / Raw HTML | https://cdn.jsdelivr.net/npm/react-color-pro/dist/react-color-pro.umd.js |
Choose the method that best fits your project environment.
| Package Name | Bundle Size | Gzipped Size | Dependencies |
|---|---|---|---|
| react-color-pro | 10.39 kB | 4.37 kB | 0 |
| react-colorful | 123 kB | 48 kB | 5 |
| react-color | 143.7 kB | 36.4 kB | 7 |
| react-input-color | 54.1 kB | 18.7 kB | 6 |
| rc-color-picker | 114.5 kB | 32.8 kB | 5 |