react-color-pro

A lightweight, framework-agnostic color picker component for React applications. Built with TypeScript and styled with Tailwind CSS, react-color-pro offers a flexible API, supports modern frameworks like React and Preact, and has a tiny bundle size (~4.37 kB gzipped) with zero runtime dependencies. It includes a full-featured color picker and modular sub-components for custom use cases.

Package Details

GitHub Repository: https://github.com/rashaduldev/react-color-pro
Live Demo: https://rcp-home.vercel.app

Features

Ultra lightweight: ~4.37 kB gzipped, no runtime dependencies except React.
Framework-agnostic: Works with React, Preact, Next.js, Remix, and more.
TypeScript support: Full type definitions included.
Customizable: Tailwind CSS styles, compatible with Bootstrap or custom CSS.
Modular: Includes HueSlider, SaturationPicker, and HexInput components.
Accessible: Keyboard navigation and mobile-friendly.
Utility functions: rgbToHex, hexToRgb, hslToRgb for color manipulation.

Comparison with Other Packages

react-color-pro is designed to be lightweight and dependency-free. Here’s how it compares to other color picker libraries:

Package Name	Bundle Size	Gzipped Size	Dependencies
react-color-pro	10.39 kB	4.37 kB	0
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

Why choose react-color-pro?

Smallest bundle size for faster load times.
Zero dependencies (except React) to reduce bloat.
Modern, modular design with TypeScript support.

Installation

Install the package via npm:

npm install react-color-pro