VuelorThe composable color picker for Vue 3

Build exactly the picker your design needs — no overrides, no fighting the defaults.

Composable building blocks

Instead of one rigid drop-in, you get focused primitives — Canvas, Sliders, Inputs, Swatches — that you compose yourself. Use only what you need.

Get started

🎨

Tailwind-native, CSS-optional

Every slot ships with Tailwind classes out of the box. Prefer plain CSS? Switch to vanillacss mode. Want full control? Use unstyled mode and bring your own classes entirely.

Customization guide

⌨️

Accessible out of the box

Keyboard navigation, ARIA attributes, and focus management are built in from the start — following the WAI-ARIA Color Picker pattern so you don’t have to think about it.

API reference

🔢

Flexible output formats

Emit color as hexa, rgb, hsl, hsv, or a plain object with all representations at once. Alpha channel is included automatically when your chosen format supports it.

Format table

📦

Install with the shadcn-vue CLI

Copy a complete, editable picker into your project with one shadcn-vue add command — you own the source, no black-box dependency.

CLI guide

Add a picker in one command

Every example is a shadcn-vue registry item. Register the @vuelor registry once, then drop a complete, editable picker straight into your project.

Read the shadcn-vue CLI guide →