Blossom Color Picker: a React color picker component that displays colors in a radial petal layout with geometric nesting.
Key features:
- Trigonometric positioning eliminates gaps between petals
- Automatic viewport shifting keeps the picker visible on mobile
- Arc slider repositions based on available space
- Accepts hex, RGB, HSL, and HSL objects in any combination
- Controlled and uncontrolled modes with full TypeScript support
- Built with the latest TailwindCSS.
The blooming animation runs at 300ms by default. The component calculates layout positions at render time. Works well for compact interfaces where traditional rectangular pickers consume too much space.
👉 Blog Post
👉 GitHub Repo
👉 Live Demo
Top comments (0)