Getting Started

Blossom Color Picker is a blooming, animated color picker for modern web applications. It is available as a standalone vanilla JavaScript class and as thin wrappers for React, Vue, Svelte, and Angular.

Installation

Framework Wrappers

Select your framework and package manager:

Vanilla JavaScript

If you want to use the standalone core package directly, install @dayflow/blossom-color-picker:

Import Styles

The React, Vue, Svelte, and Angular packages already import the shared stylesheet for you.

If you are using the standalone vanilla JavaScript package, import the styles manually:

// In App.tsx, main.ts, or your entry file
import '@dayflow/blossom-color-picker/styles.css';

Basic Usage

Framework Wrappers

Select your framework to see how to integrate Blossom Color Picker into your application:

import { useState } from 'react';
import { BlossomColorPicker } from '@dayflow/blossom-color-picker-react';

function App() {
  const [color, setColor] = useState({
    hue: 330,
    saturation: 70,
    alpha: 100,
    layer: 'outer' as const,
  });

  return (
    <BlossomColorPicker
      value={color}
      onChange={setColor}
    />
  );
}

Vanilla JavaScript

import { BlossomColorPicker } from '@dayflow/blossom-color-picker';
import '@dayflow/blossom-color-picker/styles.css';

const picker = new BlossomColorPicker(document.getElementById('picker'), {
  onChange: color => console.log(color.hex),
});

Next Steps

• Read Vanilla JavaScript for the standalone API and public methods.
• Read Chrome Picker for the panel-style alternative UI.
• Read Options for the shared configuration reference.
• Read Types & Colors for value objects and accepted color formats.