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 
1document.addEventListener('alpine:init', () => {
2    Alpine.store('wireui:color-picker').setColors([
3        { name: 'White', value: '#FFF' },
4        { name: 'Black', value: '#000' },
5        { name: 'Teal',  value: '#14b8a6' },
6    ])
7})
From Node Modules 
1import Alpine from 'alpinejs'
2 
3Alpine.store('wireui:color-picker').setColors([
4    { name: 'White', value: '#FFF' },
5    { name: 'Black', value: '#000' },
6    { name: 'Teal',  value: '#14b8a6' },
7])
8 
9Alpine.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 
 1import Alpine from 'alpinejs'
 2// update with your Tailwind config path
 3import { theme } from '@/tailwind.config.js'
 4 
 5// array of duplicated colors to exclude
 6const excludeColors = [
 7    'primary',
 8    'secondary',
 9    'positive',
10    'negative',
11    'warning',
12    'info'
13]
14 
15const makeColors = () => {
16    const tailwindColors = theme.extend.colors ?? {}
17 
18    const colors = Object.entries(tailwindColors).flatMap(([name, values]) => {
19        if (typeof values === 'string' || excludeColors.includes(name)) {
20            return []
21        }
22 
23        return Object.entries(values).map(([tonality, hex]) => ({
24            name: `${name}-${tonality}`,
25            value: hex
26        }))
27    })
28 
29    colors.push({ name: 'White', value: '#fff' })
30    colors.push({ name: 'Black', value: '#000' })
31 
32    return colors
33}
34 
35Alpine.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