WireUI
WireUI
Color Picker

The Color Picker component allows you to select a color from a palette of colors. You can customize the default colors or the colors for each component instance.

Color Picker 
1<x-color-picker label="Select a Color" placeholder="Select the car color" />
Default Colors
You can customize the default colors from the Alpine.js store
From Alpine CDN 
1 
2document.addEventListener('alpine:init', () => {
3    Alpine.store('wireui:color-picker').setColors([
4        { name: 'White', value: '#FFF' },
5        { name: 'Black', value: '#000' },
6        { name: 'Teal',  value: '#14b8a6' },
7    ])
8})
From Node Modules 
 1 
 2import Alpine from 'alpinejs'
 3 
 4Alpine.store('wireui:color-picker').setColors([
 5    { name: 'White', value: '#FFF' },
 6    { name: 'Black', value: '#000' },
 7    { name: 'Teal',  value: '#14b8a6' },
 8])
 9 
10Alpine.start()
Tailwind Colors
If you want to use the Tailwind colors from your Tailwind CSS config, just use the code below to generate the new colors. If you are using TypeScript see this file 
 1 
 2import Alpine from 'alpinejs'
 3// update with your Tailwind config path
 4import { theme } from '@/tailwind.config.js'
 5 
 6// array of duplicated colors to exclude
 7const excludeColors = [
 8    'primary',
 9    'secondary',
10    'positive',
11    'negative',
12    'warning',
13    'info'
14]
15 
16const makeColors = () => {
17    const tailwindColors = theme.extend.colors ?? {}
18 
19    const colors = Object.entries(tailwindColors).flatMap(([name, values]) => {
20        if (typeof values === 'string' || excludeColors.includes(name)) {
21            return []
22        }
23 
24        return Object.entries(values).map(([tonality, hex]) => ({
25            name: `${name}-${tonality}`,
26            value: hex
27        }))
28    })
29 
30    colors.push({ name: 'White', value: '#fff' })
31    colors.push({ name: 'Black', value: '#000' })
32 
33    return colors
34}
35 
36Alpine.store('wireui:color-picker').setColors(makeColors())

Attention

Remember to pass a correct colors options into the component attributes.
Custom Colors 
 1<x-color-picker
 2    label="Select a Color"
 3    placeholder="Select the book color"
 4    :colors="[
 5        [ 'name' => 'White',  'value' => '#FFF' ],
 6        [ 'name' => 'Black',  'value' => '#000' ],
 7        [ 'name' => 'Teal',   'value' => '#14b8a6' ],
 8        [ 'name' => 'Slate',  'value' => '#64748b' ],
 9        [ 'name' => 'Red',    'value' => '#ef4444' ],
10        [ 'name' => 'Lime',   'value' => '#a3e635' ],
11        [ 'name' => 'Sky',    'value' => '#38bdf8' ],
12        [ 'name' => 'Violet', 'value' => '#8b5cf6' ],
13        [ 'name' => 'Pink',   'value' => '#8b5cf6' ],
14        [ 'name' => 'Indigo', 'value' => '#6366f1' ],
15    ]"
16/>
17 
18<x-color-picker
19    label="Select a Color"
20    placeholder="Select the book color"
21    :colors="[
22        '#FFF',
23        '#000',
24        '#14b8a6',
25        '#64748b',
26        '#ef4444',
27        '#a3e635',
28        '#38bdf8',
29        '#8b5cf6',
30        '#8b5cf6',
31        '#6366f1',
32    ]"
33/>
Color name as value 
1<x-color-picker
2    label="Select a Color"
3    placeholder="Select the book color"
4    color-name-as-value
5/>
Component Options

The Color Picker component receives all options from the input component, except the prefix, icon and the slots prepend and append.

Options

Prop Required Default Type
colors false all tailwind colors array|Collection