dayflow-js

dayflow-js / BlossomColorPicker

Public

A beautiful, blooming color picker for Web, built with pure CSS and compatible with JS, React, Vue, Svelte, and Angular. 🌟 If you like it, give it a star :)

dayflow-js.github.ioBlossomColorPicker blossom-ui color-picker
171
6
100% credibility
Found Feb 07, 2026 at 55 stars 3x -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Blossom Color Picker is a React component library offering a visually stunning, animated flower-like interface for selecting and adjusting colors in web applications.

How It Works

1
👀 Discover Blossom Color Picker

You come across a stunning flower-shaped color chooser that makes picking colors fun and beautiful for your website or app.

2
📦 Add to Your Project

You easily bring it into your website project with a quick copy-paste setup.

3
🖼️ Place It on Your Page

You drop the color picker wherever you want users to choose colors, like in a design tool or settings.

4
🎨 Pick Your Colors

You choose a list of beautiful colors it will offer, or use the ready-made pretty set.

5
🌸 Watch It Bloom

Click the center circle and see the petals beautifully unfold like a flower in full bloom.

6
🧭 Select and Adjust

Tap a colorful petal to pick a hue, then slide the arc to make it brighter or darker just right.

✨ Perfect Colors Ready

You now have gorgeous, precise colors with hex, HSL codes ready to use, making your designs pop effortlessly.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 55 to 171 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is BlossomColorPicker?

BlossomColorPicker is a TypeScript color picker that blooms into a flower-like UI on interaction, letting users select hues from petal layers and tweak saturation via an arc slider. Built with Tailwind CSS, it replaces clunky default inputs with a visually engaging component available as a zero-dependency vanilla JS class or thin wrappers for React, Vue 3, Svelte 5, and Angular. Developers drop it in via npm for controlled value props, onChange callbacks, and programmatic expand/collapse.

Why is it gaining traction?

Its beautiful blooming animation and geometric petal nesting create a dense, gap-free layout that feels premium without custom CSS tweaks. Adaptive positioning auto-shifts for mobile viewports and repositions the slider for optimal space, plus dark mode tinting from the selected color. With flexible color inputs (hex, HSL objects, RGB strings) and runtime options like petal sizing, it hooks devs seeking polished UX over basic sliders.

Who should use this?

Frontend devs crafting design tools, theme editors, or e-commerce color selectors in React/Vue/Svelte/Angular apps. Ideal for product teams wanting a drop-in upgrade for user-facing color inputs, especially where delightful interactions boost engagement, like beautiful blooming flowers in a creative app or customizable dashboards.

Verdict

Grab it for UIs needing visual pop—docs are thorough with full API examples, and multi-framework support shines. At 119 stars and 1.0% credibility, it's early but stable; test in non-prod first for edge cases.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.