@amplo

Highly specialized single-component registry: a Radix-style composable OKLCH-native color picker for shadcn/ui. Supports sRGB, Display-P3, Rec.2020-stretched color spaces with lossless format switching (hex, rgb, hsl, hsb, oklch, oklab, p3), live WCAG 2.1 and APCA contrast metrics, gamut-warning lines, eyedropper, alpha slider, swatches, and full keyboard accessibility. Built for Next.js + Tailwind CSS v4 with shadcn/ui semantic tokens. MIT-licensed. Use for: design tools, theme builders, or any product feature where users need to pick colors with accurate wide-gamut rendering and accessibility feedback.

9 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://amplo.ale.design/r/registry.json

pnpm pnpm dlx shadcn@latest add https://amplo.ale.design/r/registry.json

bun bunx shadcn@latest add https://amplo.ale.design/r/registry.json

fetch registry curl -s https://amplo.ale.design/r/registry.json

Components

9 total

Amplo Color Picker ui

OKLCH-native, Display-P3-aware color picker built on Base UI primitives — Hue/Lightness/Alpha on Slider, FormatSwitcher on Select, ChannelInput on NumberField,…

npx shadcn@latest add https://amplo.ale.design/r/color-picker.json

Amplo Gradient Picker ui

Linear / radial / conic gradient editing on Base UI primitives — TypeSwitcher/InterpSwitcher/RadialSizeSelect on Select, ReverseStops and the StopList editor a…

npx shadcn@latest add https://amplo.ale.design/r/gradient-picker.json

Amplo Fill Picker ui

Color + gradient + the solid/gradient mode switcher (FillPicker.Root/Tabs/Tab/Pane) — the "give me everything" entry point, Base UI variant. Pulls the Base UI …

npx shadcn@latest add https://amplo.ale.design/r/fill-picker.json

Amplo Color Picker (Radix) ui

Radix/shadcn-classic shells for the Amplo color picker — Hue, Lightness, Alpha, FormatSwitcher, ChannelInput, Swatches, GamutBadge and ContrastReadout built on…

npx shadcn@latest add https://amplo.ale.design/r/color-picker-radix.json

Amplo Gradient Picker (Radix) ui

Radix/shadcn-classic shells for the Amplo gradient picker — TypeSwitcher, InterpSwitcher and RadialSizeSelect on shadcn's Select, plus the popover stop editor.…

npx shadcn@latest add https://amplo.ale.design/r/gradient-picker-radix.json

Amplo Fill Picker (Radix) ui

Radix/shadcn-classic entry point for the Amplo fill picker — the barrel that composes the Radix color and gradient pickers with the shared solid/gradient mode …

npx shadcn@latest add https://amplo.ale.design/r/fill-picker-radix.json

Amplo Color Picker Engine ui

Dialect-agnostic core of the Amplo color picker: the OKLCH state engine (types, conversions, gamut math, CSS Color 4 chroma reduction, WCAG + APCA contrast), t…

npx shadcn@latest add https://amplo.ale.design/r/color-picker-engine.json

Amplo Gradient Picker Engine ui

Dialect-agnostic core of the Amplo gradient picker: CSS gradient parsing/serialization with per-stop format state, the gradient context and hook, and the point…

npx shadcn@latest add https://amplo.ale.design/r/gradient-picker-engine.json

Amplo Fill Picker Engine ui

Dialect-agnostic core of the Amplo fill picker: the solid/gradient mode state (fill context + `useFillPicker`) and the FillPicker.Root/Tabs/Tab/Pane parts both…

npx shadcn@latest add https://amplo.ale.design/r/fill-picker-engine.json