Components
Curated UI collection
React Color Picker Components
React color picker components enable users to select colors through intuitive interfaces in your applications. The 21st.dev registry includes 60 color picker libraries and components for React, with 27 exact matches specifically designed for color selection functionality. These components range from simple color input solutions to advanced pickers with multiple color format support, making it easy to integrate color selection into forms, design tools, and customization interfaces.
Color Picker
by Trevor McIntire
Color Selector
by tom
Color Picker
by Trevor McIntire
HeroUI Color Picker
by Hero Ui
Apple Color Picker
by Muhammad Asif
HeroUI Color Picker
by Hero Ui
Color Picker
by cult/ui
Emoji Picker
by liveblocks
Color Picker
by Hayden Bleasel
Interactive Selector
by Le Thanh
Arc Browser like Color Picker
by Clément Janssens
Dialog
by Efferd
BG Patterns
by Efferd
HeroUI Color Picker
by Hero Ui
Radio Group
by Origin UI
Color Picker
by Abraham
Color Change Card
by Vaibhav Kumar Singh
Gradient Selector Card
by Isaiah
Color Picker
by Ali Imam
ColorSwatchPicker
by Hero Ui
Color Input
by Kokonut Baffier
HeroUI Color Picker
by Hero Ui
Color Picker
by Abraham
Rainbow Borders Button
by M.bin Salman
Text Color
by Ali Imam
Color Palette Card
by Ravi Katiyar
HeroUI Color Picker
by Hero Ui
Feedback Slider
by LN
Day Picker
by 0xUrvish
Color Picker
by Abraham
Retro Grid
by wisedev
Icon Picker
by Rodrigo Brandão
Noisy Gradient Backgrounds
by Hossain Jahed![Calendar [React Day Picker] — react color picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991983843.png)
Calendar [React Day Picker]
by Origin UI
Apple Calendar Picker
by Muhammad Asif
Emoji Picker
by liveblocks
HeroUI Color Area
by Hero Ui
Color Picker
by Abraham
Color Palette
by Ravi Katiyar![Calendar [React Day Picker] — react color picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/appointment-picker/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Apple Emoji Picker
by Muhammad Asif
ColorSwatch
by Hero Ui
ColorEmotionSelect
by Ruixen UI
EmojiPicker
by Bankk![Date Range Picker [react-aria-components] — react color picker component for React & Tailwind by James Shopland](https://cdn.21st.dev/user_jolbol1/date-range-picker/default/preview.png)
Date Range Picker [react-aria-components]
by James Shopland
Mini Calendar
by Hardik Kubavat![Calendar [React Day Picker] — react color picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991576300.png)
Calendar [React Day Picker]
by Origin UI
Emoji Radio Group
by Ruixen UI
Custom Checkbox
by Edil Ozi
Wheel Picker
by Chánh Đại![Calendar [React Day Picker] — react color picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/default/preview.1737991401753.png)
Calendar [React Day Picker]
by Origin UI
Background Gradient Snippet
by 21st Indexer
ColorSwatchPicker
by Hero Ui
Shader R
by Leandro Araujo![Calendar [React Day Picker] — react color picker component for React & Tailwind by Origin UI](https://cdn.21st.dev/user_originui/calendar/range-calendar-with-presets/preview.png?v=1)
Calendar [React Day Picker]
by Origin UI
Ass
by Athrav Mishra
HeroUI Color Area
by Hero Ui
Calendar With Presets
by Ruixen UI
HeroUI Color Area
by Hero Ui
Background Gradient Snippet
by 21st Indexer
What’s in this collection
- 6 of 43 use Motion
- 5 of 43 use Radix
- 11 of 43 use Lucide icons
- 19 need nothing beyond React and Tailwind
- Most common dependencies: lucide-react, motion