Overview
Components
Text Animations
Interactive color picker component.
tailwind-variants
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/color-selector.json
Install dependencies
Install the required packages for this component:
pnpm add tailwind-variants
Copy the Source Code
Copy and paste the following code into your project:
color-selector.svelte
index.ts
Folder Structure
Folder Structure
Examples
Size Variation
Mix compact preset swatches with larger custom CSS colors to build palettes that fit both dense toolbars and expressive settings panels.
SMALL
DEFAULT
LARGE
Props
| Name | Type | Default | Description |
|---|---|---|---|
colors | readonly ColorSelectorColor[] | [] | The swatches to render. Each item can be a built-in preset name or any supported CSS color string. |
size | "sm" | "default" | "lg" | "default" | Controls the diameter of each swatch button. |
defaultValue | ColorSelectorColor | | Sets the initial selected swatch for uncontrolled usage. |
value | ColorSelectorColor | | Controlled selected color value. Supports `bind:value`. |
name | string | | When provided, renders a hidden input so the selected value participates in native form submission. |
onColorSelect | ((color: ColorSelectorColor) => void) | undefined | | Callback fired when a swatch is selected. |
class | string | | Custom classes merged onto the radiogroup root. |