Palette

A color palette picker spanning Tailwind's named hues and shades. Bind it to an Alpine model or host it inside a Select shell; on pick it dispatches a bubbling select-close event with the chosen value.

Selected:

Usage Example

<div x-data="{ picked: '' }">
    @palette.Palette(palette.Config{
        ID:          "demo-palette",
        Alpine: &palette.AlpineConfig{Model: "picked"},
        ShowHex:     true,
    })
    <p>Selected: <span x-text="picked || '—'"></span></p>
</div>

Inside a Select Shell

Host the palette inside a Select with Shell: true; the trigger label reflects the picked value via ValueExpr. Add LazyWhen when the full swatch grid should render only after the shell opens.

Inside a Select Shell

<div x-data="{ shellPicked: '' }">
    @selectfield.Select(selectfield.Config{
        ID:             "demo-shell",
        Shell:          true,
        TriggerLeading: paletteShellTriggerSwatch(),
        ValueExpr:      "shellPicked || 'Pick a color'",
    }) {
        @palette.Palette(palette.Config{
            ID:          "demo-shell-palette",
            Alpine: &palette.AlpineConfig{Model: "shellPicked"},
            LazyWhen:    "isOpen",
            ShowHex:     true,
        })
    }
</div>

Restricted Hues

Pass Hues and Shades when a workflow should offer only approved brand choices instead of the full Tailwind palette.

Restricted Hues

@palette.Palette(palette.Config{
    ID:     "brand-palette",
    Hues:   []string{"purple", "sky", "teal"},
    Shades: []string{"300", "500", "700"},
})

Compact Picker

HideNeutral and HideReset trim the control for required color fields where white, black, and clearing the value are not valid choices.

Compact Picker

@palette.Palette(palette.Config{
    ID:          "compact-palette",
    Hues:        []string{"red", "amber", "green", "blue"},
    Shades:      []string{"400", "600"},
    HideNeutral: true,
    HideReset:   true,
})

API Reference

Prop	Type	Default	Description
`ID`	`string`	`""`	Unique id for the palette root (swatch buttons + Alpine scope).
`Alpine`	`*AlpineConfig`	`nil`	Client-side Alpine bindings (Model).
`Hues`	`[]string`	`all`	Restrict to specific Tailwind hues (default: the full set).
`Shades`	`[]string`	`all`	Restrict to specific shades (e.g. "500", "700").
`HideNeutral`	`bool`	`false`	Hide the neutral (gray) row.
`HideReset`	`bool`	`false`	Hide the reset/clear control.
`ShowHex`	`bool`	`false`	Show the hex value of the hovered/selected swatch.
`RootClass`	`string`	`""`	Extra classes on the palette container.
`LazyWhen`	`string`	`""`	Alpine expression that delays swatch-grid rendering until truthy; useful inside Select shells with an open state.

Rating Search