Overview
Components
Text Animations
Color Selector
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
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. |