Color pickers
Values with no name: ColorPicker for a solid, GradientPicker for stops, ImagePicker for a file — each its own provider-driven layout. The trigger is yours.
Color pickers
Values with no name: ColorPicker for a solid, GradientPicker for stops, ImagePicker for a file — each its own provider-driven layout. The trigger is yours.
Demo
The sheet’s three sets on one Component select: the pickers, the smaller cards, the sliders, the six dropdown triggers, and the modal. Most controls pick a composition, not a prop.
Saved
The value format only moves on a remount
defaultColorFormat seats the provider’s initial state and is never read again, so the demo remounts the provider when you change it. In a real screen the format select inside the picker is what changes it, and that select is already wired.Contextual demo
A picker sits behind a swatch, and the trigger that opens it is the part the kit does not ship — so it gets a screen.
The trigger and the popover are application markup
DialogTrigger and Popover with application markup — which is what you would write, and the largest gap on this page.The family
Three pickers, one card, and their parts. The card, the provider, and every part hang off ColorPicker as static members.
| Component | Description | Import from |
|---|---|---|
| ColorPicker | The solid picker: a saturation and brightness area, an eyedropper, hue and alpha sliders, and a format select beside the value input. Carries the family’s card, provider, and parts as static members. | @/components/application/color-picker/color-picker |
| GradientPicker | The gradient picker: a draggable 2D gradient area, a type dropdown, a reverse button, a stop track, and the editable stop list. | @/components/application/gradient-picker/gradient-picker |
| ImagePicker | The image picker: a drop zone that draws the file to a canvas, a fill-mode dropdown, a rotate button, and seven adjustment sliders. | @/components/application/image-picker/image-picker |
| ColorPicker.SavedColors | A labelled swatch row with an optional Add button. Inside a provider it is already wired: the current color is marked selected, and clicking a swatch sets it. | @/components/application/color-picker/color-picker |
| SwatchItem | One round swatch, at 16px or 20px. Selectable only inside a React Aria ColorSwatchPicker, which SavedColors supplies. | @/components/application/color-picker/color-picker |
| InputCell | The input shell the value fields are built from: a ringed box with a corner radius per position, so a row of them reads as one input group. | @/components/application/color-picker/color-picker |
Built from
Six kit pieces across three directories; four have their own docs page.
Component | Where it’s used here |
|---|---|
| Select | The value format picker, at size="sm" in a fixed 80px box. |
| Dropdown | The gradient type and the image fill mode, both behind a link-gray button with a 12px chevron. |
| Button and ButtonUtility | The eyedropper, Add, reverse, rotate, and remove-stop controls. |
| FileTrigger | The click-to-upload path in the image picker’s drop zone. |
The three pickers
Each is an all-in-one layout with no props: what it edits comes from the provider around it. All three are live.
Saved
Stops
or drag and drop
The card’s padding is the kit’s
ColorPicker.Dialog is the family’s only card, and since 2026-08-22 it sets gap-4 p-5 itself, so the three cells above pass nothing. The 20px gutter and the 16px rhythm are the sheet’s, read off its Solid color symbol, and were measured on these cards that day in Chromium against a production build.The three match the sheet exactly
Tabs — the sheet’s “Horizontal tabs” instance — and the Demo’s Tabbed picker subject composes the full symbol live, three providers around one card; the symbol’s close X belongs to the popover chrome, where the Dropdown trigger subject wires it.Rebuilt from parts
The sheet’s smaller cards are the solid picker taken apart and reassembled in a narrower box, from the exported members.
Saved
Gray
Three cards, three of the sheet’s sizes
Dialog knows one card, the full one, at rounded-2xl, p-5, and gap-4. The sheet draws its smaller cards at a 12px radius with their own padding, so each cell above passes rounded-xl and the rest by hand: p-4 on the 312 and 248px cards, and on the 208px card p-3 gap-3 with size="sm", whose 16px swatches on an 8px gap put eight in its 184px of content width exactly, as the 20px ones do in the 248px card’s 216.Saved gradients
What is composed, and what stays unbuilt
SavedColors has no slot for. Listed row by row on the Code tab.Value formats
The format select and the value input read the same provider. All five formats are live, each in its own provider.
A sixth model lives in the gradient picker
_Color inputs family has six members. Five are the formats above. The sixth is a gradient stop row: a position field, a color field, an alpha field, and a remove button, which the kit renders only inside GradientPicker.StopList and never on its own.Stops
States
Almost every state belongs to a part, not a picker. Click, tab, and drag the cells: they are real controls.
Saved
Stops
Two states are not shown here