Tailwind Color Picker for Svelte

A simple, customizable color picker component for Svelte that uses Tailwind CSS color palettes.

Live Demo

Features

• HTML Canvas for optimal performance
• Flexible color options: Use Tailwind default colors or your own
• Lightweight with no dependencies
• Customizable appearance (size, margins, borders, rounded corners)
• Vertical or horizontal orientation
• Ability to limit color and shade choices

Installation

npm i svelte-tailwind-colorpicker

Usage

1. Import the component in your Svelte file:

import TailwindColorPicker from 'svelte-tailwind-color-picker';

2. Use the component in your Svelte template:

<TailwindColorPicker bind:activeSwatch />

3. Access the selected color:

{#if activeSwatch}
    <p>Selected color: {activeSwatch.color}-{activeSwatch.shade} ({activeSwatch.swatch.hex})</p>
{/if}

Props

Examples

Basic Usage

<TailwindColorPicker bind:activeSwatch />

Customized Appearance

<TailwindColorPicker
    swatchSize={40}
    swatchMargin={2}
    borderColor="#cccccc"
    borderThickness={2}
    roundedCorners={true}
    cornerRadius={8}
    orientation="vertical"
    includeColors={['red', 'blue', 'green']}
    includeShades={['400', '500', '600']}
    bind:activeSwatch
/>

Handling Color Selection

<script>
    import TailwindColorPicker from 'svelte-tailwind-color-picker';
    import type { ActiveSwatch } from 'svelte-tailwind-color-picker';

    let activeSwatch: ActiveSwatch | null = null;

    function handleColorChange(event: CustomEvent<ActiveSwatch>) {
        const selectedSwatch = event.detail;
        console.log(`Selected color: ${selectedSwatch.color}-${selectedSwatch.shade}`);
        console.log(`Hex value: ${selectedSwatch.swatch.hex}`);
    }
</script>

<TailwindColorPicker bind:activeSwatch on:change={handleColorChange} />

Using a Custom Palette

<script>
    import TailwindColorPicker from 'svelte-tailwind-color-picker';
    import type { ColorGroup } from 'svelte-tailwind-color-picker';

    const customPalette: ColorGroup[] = [
        {
            name: 'customRed',
            swatches: {
                '500': { hex: '#ff0000' },
                '600': { hex: '#cc0000' },
                '700': { hex: '#990000' },
            }
        },
        // Add more custom color groups as needed
    ];
</script>

<TailwindColorPicker palette={customPalette} />

Development

To set up the project for development:

1. Clone the repository
2. Install dependencies with npm install
3. Start the development server with npm run dev

Building

To build the library:

npm run package

Publishing

To publish the library to npm:

1. Update the version in package.json
2. Build the package
3. Run npm publish

License

MIT License