A modern, customizable React color picker component library with 8-digit HEX alpha support
npm install react-color-pikr> A modern, accessible, and feature-rich React color picker component library with comprehensive alpha channel support





🚀 Live Demo | 📚 Documentation | 📦 npm Package
React Color Pikr stands out as the most comprehensive color picker solution for modern React applications. Unlike other libraries, it provides native 8-digit HEX alpha support, zero external dependencies, and built-in accessibility features.
``bash`
npm install react-color-pikr
`bash`
yarn add react-color-pikr
`bash`
pnpm add react-color-pikr
`tsx
import React, { useState } from 'react';
import { ColorPicker } from 'react-color-pikr';
function App() {
const [color, setColor] = useState('#3498db80'); // 8-digit HEX with alpha
return (
onChange={setColor}
format="hex"
showAlpha={true}
showPresets={true}
/>
);
}
`
> Note: No CSS imports required! All styles are included automatically.
| Guide | Description |
|-------|-------------|
| Getting Started | Installation, setup, and basic usage |
| API Reference | Complete component and utility documentation |
| Examples | Real-world usage examples and patterns |
| Customization | Advanced styling and theming guide |
| Migration Guide | Migrate from other color picker libraries |
tsx
const [color, setColor] = useState('#ff6b6b');
return ;
`$3
`tsx
value="#3498db80"
onChange={setColor}
showAlpha={true}
format="hex"
/>
`$3
`tsx
const presets = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12'];
value={color}
onChange={setColor}
presetColors={presets}
/>
`$3
`tsx
value={color}
onChange={setColor}
format="rgb" // Returns: rgba(52, 152, 219, 0.8)
showColorFormat={true}
/>
`Key Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
value | string | #FF0000 | Current color value |
| onChange | (color: string) => void | - | Color change callback |
| format | 'hex' \| 'rgb' \| 'hsv' \| 'hsl' | 'hex' | Output format |
| showAlpha | boolean | false | Enable alpha channel |
| showPresets | boolean | true | Show preset colors |
| width | number | 280 | Picker width |
| height | number | 200 | Picker height |→ See complete API reference
Why Choose React Color Pikr?
$3
- 50% smaller bundle (15KB vs 30KB+)
- No CSS imports required
- Better TypeScript support
- Active maintenance and updates
- Better alpha support with 8-digit HEX$3
- More features (presets, format selector, alpha)
- Better accessibility
- TypeScript included
- Customizable sizing and styling$3
- Simpler API with consistent return values
- Better mobile support
- No CSS conflicts with inline stylesBrowser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
- Mobile browsers
Contributing
Contributions are welcome! Please read our Contributing Guide for details.
$3
`bash
Clone repository
git clone https://github.com/ssunils/react-color-pikr.gitInstall dependencies
npm installStart development server
npm run devBuild library
npm run build:libValidate before release
npm run validate-release
`$3
`bash
Create releases using GitHub Actions (recommended)
Go to Actions → Release → Run workflow
Or use npm scripts
npm run release:patch # Bug fixes
npm run release:minor # New features
npm run release:major # Breaking changes
npm run release:beta # Prerelease
``MIT © Sunil Soundarapandian
- Report Issues
- Discussions
- Email: sunil.soundarapandian@gmail.com
---
Star this repo if React Color Pikr helped you build something awesome!