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
Sometimes you want to use the Tailwind colors from your Tailwind CSS config, just use the below code 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/>
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