ColorSelector

src/lib/components/ui/color-selector/ColorSelector.svelte

Purpose

A color picker with a Popover trigger button showing a color swatch and the current hex value. Opens to the more-shadcn color-picker primitive. Created to consolidate the duplicated Popover + Button + swatch + label block across Profile, Create User, and Edit User pages.

Not avatar-specific — can be used for any color selection field.

Origin

Custom — Primebrick-written wrapper composing shadcn-svelte™ Popover + Button and the more-shadcn-svelte™ color-picker primitive (src/lib/components/ui/color-picker/). Not vendored as a unit from any registry.

Usage

Default (bindable value)

Code
<ColorSelector
  bind:value={formData.avatar_color}
  labelKey="profile.avatarColor"
  placeholderKey="profile.selectColor"
/>

With a fallback color

Code
<ColorSelector
  bind:value={formData.avatar_color}
  labelKey="profile.avatarColor"
  fallbackColor="#0ea5e9"
/>

Props

Full prop table: see API reference — colorselector.

Props: value (bindable, string | undefined), labelKey: string, placeholderKey?: string, fallbackColor?: string = "#000000", triggerId?: string.

Next steps

• Component catalog
• Color picker (more-shadcn) — the underlying primitive
• API reference