ColorSwatchPicker

Usage

<script setup lang="ts">
import { ColorSwatchPicker } from '@hareui/vue'
</script>

<script setup lang="ts">import type { ColorSwatchPickerItem } from '@hareui/vue'import { ColorSwatchPicker } from '@hareui/vue'const colors: ColorSwatchPickerItem[] = ['#F43F5E', '#D946EF', '#8B5CF6', '#3B82F6', '#06B6D4', '#10B981', '#84CC16']</script><template>  <ColorSwatchPicker :items="colors" /></template>

Pass the swatches as items: a hex/CSS color string, or { value, label?, disabled? } to set the accessible name or disable one swatch. Each item renders a ColorSwatch plus a check indicator. Selection is matched by color, so #8b5cf6 and #8B5CF6 are the same item.

<ColorSwatchPicker
  v-model="color"
  :items="['#F43F5E', { value: '#3B82F6', label: 'Sky' }]"
/>

Examples

Variants

Circle (default)

Square

<script setup lang="ts">import type { ColorSwatchPickerItem } from '@hareui/vue'import { ColorSwatchPicker } from '@hareui/vue'const colors: ColorSwatchPickerItem[] = ['#F43F5E', '#D946EF', '#8B5CF6', '#3B82F6', '#06B6D4', '#10B981', '#84CC16']</script><template>  <div class="flex flex-col gap-6">    <div class="flex flex-col gap-2">      <span class="text-sm text-muted">Circle (default)</span>      <ColorSwatchPicker :items="colors" variant="circle" />    </div>    <div class="flex flex-col gap-2">      <span class="text-sm text-muted">Square</span>      <ColorSwatchPicker :items="colors" variant="square" />    </div>  </div></template>

Sizes

<script setup lang="ts">import type { ColorSwatchPickerItem } from '@hareui/vue'import { ColorSwatchPicker } from '@hareui/vue'const colors: ColorSwatchPickerItem[] = ['#F43F5E', '#D946EF', '#8B5CF6', '#3B82F6', '#06B6D4', '#10B981', '#84CC16']const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const</script><template>  <div class="flex flex-col gap-6">    <div v-for="size in sizes" :key="size" class="flex items-center gap-4">      <span class="w-8 text-sm text-muted">{{ size }}</span>      <ColorSwatchPicker :items="colors" :size="size" />    </div>  </div></template>

Disabled

<script setup lang="ts">import type { ColorSwatchPickerItem } from '@hareui/vue'import { ColorSwatchPicker } from '@hareui/vue'const colors: ColorSwatchPickerItem[] = ['#F43F5E', '#D946EF', '#8B5CF6', '#3B82F6', '#06B6D4', '#10B981', '#84CC16']</script><template>  <ColorSwatchPicker :items="colors" disabled /></template>

Stack Layout

<script setup lang="ts">import type { ColorSwatchPickerItem } from '@hareui/vue'import { ColorSwatchPicker } from '@hareui/vue'const colors: ColorSwatchPickerItem[] = ['#F43F5E', '#D946EF', '#8B5CF6', '#3B82F6', '#06B6D4', '#10B981', '#84CC16']</script><template>  <ColorSwatchPicker :items="colors" layout="stack" /></template>

Default Value

<script setup lang="ts">import type { ColorSwatchPickerItem } from '@hareui/vue'import { ColorSwatchPicker } from '@hareui/vue'const colors: ColorSwatchPickerItem[] = ['#F43F5E', '#D946EF', '#8B5CF6', '#3B82F6', '#06B6D4', '#10B981', '#84CC16']</script><template>  <ColorSwatchPicker :items="colors" default-value="#8B5CF6" /></template>

Controlled

v-model accepts a hex string or a Color object. When it is a Color, updates emit a Color.

Selected: #f43f5e

<script setup lang="ts">import type { ColorSwatchPickerItem } from '@hareui/vue'import { ColorSwatchPicker, colorToString, parseColor } from '@hareui/vue'import { ref } from 'vue'const colors: ColorSwatchPickerItem[] = ['#F43F5E', '#D946EF', '#8B5CF6', '#3B82F6', '#06B6D4', '#10B981', '#84CC16']const value = ref(parseColor('#F43F5E'))</script><template>  <div class="flex flex-col gap-4">    <ColorSwatchPicker v-model="value" :items="colors" />    <p class="text-sm text-muted">      Selected: <span class="font-medium">{{ colorToString(value, 'hex') }}</span>    </p>  </div></template>

Custom Indicator

The indicator slot replaces the check icon; the default slot replaces the whole item content and receives { value, label, selected }.

<script setup lang="ts">import type { ColorSwatchPickerItem } from '@hareui/vue'import { ColorSwatchPicker } from '@hareui/vue'const colors: ColorSwatchPickerItem[] = ['#F43F5E', '#D946EF', '#8B5CF6', '#3B82F6', '#06B6D4', '#10B981', '#84CC16']</script><template>  <ColorSwatchPicker :items="colors">    <template #indicator>      <svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor">        <path d="M8 14s-6-3.7-6-8a3.5 3.5 0 0 1 6-2.4A3.5 3.5 0 0 1 14 6c0 4.3-6 8-6 8Z" />      </svg>    </template>  </ColorSwatchPicker></template>

Render Function

Use as (or as-child) to change the root element.

<script setup lang="ts">import type { ColorSwatchPickerItem } from '@hareui/vue'import { ColorSwatchPicker } from '@hareui/vue'const colors: ColorSwatchPickerItem[] = ['#F43F5E', '#D946EF', '#8B5CF6', '#3B82F6', '#06B6D4', '#10B981', '#84CC16']</script><template>  <ColorSwatchPicker :items="colors" as="section" data-custom="foo" /></template>

Customization

Tailwind CSS

<script setup lang="ts">import type { ColorSwatchPickerItem } from '@hareui/vue'import { ColorSwatchPicker } from '@hareui/vue'const colors: ColorSwatchPickerItem[] = ['#F43F5E', '#D946EF', '#8B5CF6', '#3B82F6', '#06B6D4', '#10B981', '#84CC16']</script><template>  <ColorSwatchPicker    :items="colors"    default-value="#8B5CF6"    variant="square"    class="rounded-2xl border border-border/80 bg-surface p-4 shadow-sm ring-1 ring-accent/5"  /></template>

Global CSS

app.use(createHareUI({
  ui: {
    colorSwatchPicker: {
      slots: {
        base: 'gap-4',
        item: 'shadow-md',
      },
    },
  },
}))

Styling Reference

`ui` key	`data-slot`	Description
`base`	`color-swatch-picker`	Container (flex, wraps)
`item`	`color-swatch-picker-item`	One selectable swatch; ring when selected
`swatch`	`color-swatch-picker-swatch`	The ColorSwatch inside the item
`indicator`	`color-swatch-picker-indicator`	Check icon wrapper, shown on the selected item only

Interactive States

Hover: swatch scales to 1.1 (not while selected)
Focus: :focus-visible focus ring
Selected: data-state="checked": border in the swatch color, swatch shrinks to reveal a gap
Disabled: data-disabled: reduced opacity

API Reference

Props

Prop	Type	Default	Description
`items`	`ColorSwatchPickerItem[]`	-	The swatches to render.
`modelValue`	`string \| Color`	-	The selected color (controlled). A hex string or a `Color` object matching one of the items. Falls back to the enclosing `ColorPicker`'s color when neither this nor `v-model` is set.
`defaultValue`	`string \| Color`	-	The initially selected color when uncontrolled.
`size`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`	`'md'`	Size of the swatches.
`variant`	`"circle" \| "square"`	`'circle'`	Shape of the swatches.
`layout`	`"grid" \| "stack"`	`'grid'`	Layout direction.
`disabled`	`boolean`	`false`	Whether every item is disabled.
`name`	`string`	-	The name of the field, used when submitting a form.
`as`	`any`	-	Element or component the root renders as.
`asChild`	`boolean`	-	Render the root as its single child instead of a wrapper element.
`ui`	ComponentSlots<{ slots: { base: string; item: string[]; swatch: string[]; indicator: string[]; }; variants: { layout: { grid: string; stack: { base: string; }; }; size: { xs: { item: string; }; sm: { item: string; }; md: string; lg: { item: string; }; xl: { item: string; }; }; variant: { circle: string; square: { item: string; swatch: string; }; }; }; compoundVariants: ({ variant: string; size: string; class: { item: string; swatch: string; }; } \| { variant: string; size: string; class: { item: string; swatch?: undefined; }; })[]; defaultVariants: { layout: string; size: string; variant: string; }; }>	-	Per-slot class overrides.

Slots

Slot	Props	Description
`default`	`ColorSwatchPickerSlotProps`	Replaces the whole content of an item (swatch and indicator).
`indicator`	`ColorSwatchPickerSlotProps`	Replaces the check icon inside the indicator (always rendered, revealed by the selected state).