ridiculous — ridiculously typed shadcn components

/ component

Gradient Editor

Linear / radial / conic gradients with draggable stops, oklch-default interpolation, and color-picker stops via cross-registry composition.

/ auto-type

Basic Usage

Type unset → switcher visible → onChange emits whichever type the user last selected.

linear-gradient(45deg, oklch(0.628 0.258 29.234), oklch(0.622 0.214 259.815))

/ type-locked

Type-Locked

Setting type hides the switcher and locks onChange to that gradient flavor.

→ linear

linear-gradient(45deg, #ff0000, #0000ff)

→ radial

radial-gradient(circle at 50% 50%, #ff0000, #0000ff)

→ conic

conic-gradient(from 0deg at 50% 50%, #ff0000, #0000ff)

/ maxStops

Stops Control

The maxStops prop caps how many stops the editor will allow. Min 2 is always enforced.

→ maxStops=3

linear-gradient(45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%)

→ maxStops=12

linear-gradient(45deg, #ff0000, #ff8800, #ffff00, #88ff00, #00ff00, #00ff88, #00ffff, #0088ff, #0000ff)

/ interpolation

Interpolation Space

Same red → blue stops, different interpolation spaces. in srgb goes through a muddy gray midpoint; in oklch stays perceptually vivid through the transition. This is the brand bias.

→ in srgb

linear-gradient(90deg in srgb, #ff0000, #0000ff)

→ in oklch

linear-gradient(90deg in oklch, #ff0000, #0000ff)

/ api

API

Public surface — component props, runtime helpers, and the type exports.

§ Component

<GradientEditor<TType extends GradientType | undefined>
  value: GradientString | (string & {})
  onChange: (next: TType extends GradientType ? GradientStringMap[TType] : GradientString) => void
  type?: TType
  maxStops?: number
  className?: string
  aria-label?: string
/>

Prop	Type	Description
value	GradientString \| (string & {})	Current gradient. Any string accepted; IntelliSense suggests literal shapes.
onChange	(next) => void	Emits next gradient. Return type discriminated by `type` prop.
type	GradientType \| undefined	Lock gradient type. When unset, in-popover type switcher is shown.
maxStops	number (default 8)	Max number of stops the editor allows. Min (2) always enforced.
className	string	Applied to the trigger preview swatch.
aria-label	string	Trigger label. Defaults to "Edit gradient".

§ Runtime helpers

isGradientString(value: string): value is GradientString
isGradientString<S extends string>(value: S): value is S & (LinearGradientString | RadialGradientString | ConicGradientString)

Runtime type guard. Narrows wide strings to GradientString.

§ Types

GradientString: Union of all suggestion-string literal types. Default `onChange` return type.
GradientStringMap: { linear: LinearGradientString, radial: RadialGradientString, conic: ConicGradientString }
GradientType: "linear" | "radial" | "conic"
GradientStop: { color: ColorString, position: number }. Reuses ColorString from color-picker.
InterpolationSpace: "srgb" | "oklch" | "oklab" | "hsl" | "hwb"
InterpolationHueMethod: "shorter" | "longer"
PolarSpace: Subset of InterpolationSpace that supports hue methods: "oklch" | "hsl" | "hwb".
GradientTypeOf<S>: Extract the type from a gradient literal. GradientTypeOf<"linear-gradient(...)"> = "linear".
InterpolationOf<S>: Extract the interpolation space from a literal, if declared.

/ install

Drop it in

One command. Resolves color-picker + unit-input transitively.

$ pnpm dlx shadcn@latest add https://turtiesocks.github.io/ridiculous/r/gradient-editor.json