Loading component…
Loading component…
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
SwiftUI
Package maturity: stable · Implementation verification: Experimental
Jetpack Compose
Package maturity: stable · Implementation verification: Experimental
Flutter
Package maturity: stable · Implementation verification: Experimental
This platform’s whole catalogue is verified to React beta, SwiftUI experimental, Jetpack Compose experimental, Flutter experimental. The catalogue figure is the weakest component on that platform, not an average.
A saturation/value square, hue and alpha sliders, a hex field, swatches, and an optional eyedropper.
Reduced motion: off · your browser setting
npx @kinetixui/cli add color-pickerimport { ColorPicker } from "@kinetixui/ui";Styled entirely from the KinetixUI token contract — bg-action,
text-muted-foreground, border-input, ring-ring. Works in light and dark
with no extra config. Keyboard and ARIA behaviour is inherited from Radix where the
component is built on a primitive; the hand-built widgets (DataGrid, TreeView,
ColorPicker, MultiSelect, Tour, KanbanBoard) have their own documented interaction
models — see Accessibility.
The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.
This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.
| Prop | Type | Notes |
|---|---|---|
| value | stringhex color, e.g. `#3b82f6` (or `#3b82f6ff` when `alpha` is on). Controlled: pass `onValueChange` with it. | hex color, e.g. `#3b82f6` (or `#3b82f6ff` when `alpha` is on). Controlled: pass `onValueChange` with it. |
| defaultValue | stringstarting hex color when the picker manages its own value. Ignored once `value` is passed. | starting hex color when the picker manages its own value. Ignored once `value` is passed. |
| onValueChange | ((hex: string) => void)called with the new hex on every change — the name every other KinetixUI value control uses | called with the new hex on every change — the name every other KinetixUI value control uses |
| alpha | booleanshow an alpha slider and read/emit 8-digit hex | show an alpha slider and read/emit 8-digit hex |
| swatches | string[]preset swatches row | preset swatches row |
3 behaviours asserted on every commit by packages/ui/src/components-keyboard.test.tsx. Listed because they are tested, not the other way round — if one stops being tested it stops appearing here.
adjusts the saturation/value square with the arrow keys (Shift = bigger step)
the hue rail is a named, keyboard-operable slider
commits the hex field on Enter