Gradient Picker

Multi-stop linear gradient editor: click the bar to add a stop, drag stops (or arrow keys) to move them; a stop is selected on press or focus, Delete removes it (focus moves to the next selected stop), edit the selected stop's color, set the angle. Emits the CSS string.

Import

import { GradientPicker } from '@marbleui/ui'

Props

<GradientPicker>

Prop	Type	Default
className	`string`	`—`
defaultAngle	`number`	`90`
defaultStops	`GradientStop[]`	`—`
onChange	`(css: string) => void`	`—`

Usage notes

GradientPicker edits a multi-stop linear gradient and shows the resulting CSS with a copy button. For one color use ColorPicker.

<GradientPicker
  defaultAngle={135}
  defaultStops={[{ id: 1, color: '#22d3ee', pos: 0 }, { id: 2, color: '#a855f7', pos: 100 }]}
  onChange={setHeroBackground}
/>

Uncontrolled: defaultStops and defaultAngle (degrees, default 90) set the start. onChange receives only the CSS string, on every change including mid-drag; a saved string can’t be loaded back in. toCss(angle, stops) builds the same string.
Stop colors must be hex, rgb() or hsl() strings; named colors such as red throw. Edited colors are stored as hex, without alpha.
Adding a stop needs a pointer (click the bar). A focused stop moves with the arrow keys (Shift for 10%), and Delete or Backspace removes it; two stops always remain.
Focusing a stop (Tab) selects it, so the color controls edit it from the keyboard too. Deleting a stop moves focus to the stop that becomes selected.

Example source · show

import { GradientPicker } from './gradient-picker'

export const styles = {
  Default: () => <GradientPicker />,
  'Three stops': () => <GradientPicker defaultAngle={135} defaultStops={[{ id: 1, color: '#22d3ee', pos: 0 }, { id: 2, color: '#a855f7', pos: 50 }, { id: 3, color: '#f97316', pos: 100 }]} />,
}

Source: packages/ui/src/gradient-picker/gradient-picker.tsx

Catalog