A wrapper around react-color configured for custom themes and design systems. Built with TypeScript, Tailwind CSS, and shadcn/ui.

Demo

Unlike traditional color pickers, this component focuses on design system consistency by limiting color selection to 5 variants of each chosen color. This approach ensures color harmony while maintaining flexibility in your design choices.

• 🎨 Smart Color Selection - Automatically generates 5 harmonious variants
• 🎯 Design System Ready - Perfect for maintaining consistency
• 🔒 Safe Color Choices - Prevents off-brand colors while maintaining creative freedom
• 🎭 Multiple Presentation Options (Card and Popover)
• 📱 Responsive Design
• 🔧 Highly Customizable
• 🌈 Built with react-color
• 🎯 TypeScript Support
• 🎨 Tailwind CSS Styling

• React 18+
• Tailwind CSS
• shadcn/ui components
• react-color

1. Clone the repository

git clone https://github.com/leomiranda/react-color-picker.git

2. Install dependencies

npm install # or yarn # or pnpm install

3. Run the development server

npm run dev # or yarn dev # or pnpm dev

A compact color picker that opens in a popover when clicked. Perfect for inline color selection.

import { PopoverColorPicker } from './components/PopoverColorPicker'; <PopoverColorPicker color="#000000" paletteColors={['#068d9d', '#53599a']} suggestedColor="#6d9dc5" onColorChange={(color) => console.log(color)} triggerClassName="w-10 h-10" />;

A full-sized color picker displayed in a card format. Ideal for dedicated color selection interfaces.

import { CardColorPicker } from './components/CardColorPicker'; <CardColorPicker color="#000000" paletteColors={['#068d9d', '#53599a']} suggestedColor="#6d9dc5" onColorChange={(color) => console.log(color)} />;

When you select a color, the system automatically generates 5 variants that work harmoniously together:

const palette = [ { title: 'Primary', slug: 'primary', value: '#068d9d', }, { title: 'Secondary', slug: 'secondary', value: '#53599a', }, { title: 'Tertiary', slug: 'tertiary', value: '#6d9dc5', }, { title: 'Quaternary', slug: 'quaternary', value: '#80ded9', }, { title: 'Quintenary', slug: 'quintenary', value: '#aeecef', }, ]; function App() { const [color, setColor] = useState('#000000'); const paletteColors = palette.map((p) => p.value); const suggestedColor = palette.find((p) => p.slug === 'secondary')?.value; return ( <PopoverColorPicker color={color} paletteColors={paletteColors} suggestedColor={suggestedColor} onColorChange={setColor} /> ); }

This approach ensures:

• Consistent color relationships
• Harmonious design system
• Safe color combinations
• Flexible yet controlled choices

• Design Systems
• Theme Customization
• Brand Color Management
• UI Component Libraries
• Design Tools
• Admin Interfaces

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

MIT

• 📫 Report bugs through GitHub issues
• 🌟 Star the repo if you find it helpful!