All components
Forms
GradientPicker
beta
Since 1.2
Linear-gradient builder: edit stop colors and positions, set the angle, with a live preview.
Forms
primitive
Display
Documented
import { GradientPicker } from '@ivim/native/components';
When to use
Use when
Authoring a linear gradient for a surface, hero, or token.
Don't use when
Applying an existing brand gradient — use GradientSurface directly.
Example
Preview
Code
Stop 1 · 0%
Hue
Saturation
Brightness
Angle · 90°
Accessibility
Roles and screen-reader behavior this component provides, plus keyboard interactions.
•
Stops are selectable buttons; position and angle are "adjustable" sliders; the selected stop’s color reuses ColorPicker.
State coverage
Interaction and visual states this component supports.
base
semantic color
density
Token references
Semantic design tokens this component page exercises. Tap one to edit it live.
Related components
Components that solve adjacent problems or compose with this one.