A colour picker where the chosen swatch settles in as a ring springs out around it.
Pro<ColorSwatch />5 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| colors Your swatches (hex). | (string | { color, label? })[] | 10-colour palette |
| value / onValueChange Controlled selection (or use defaultValue). | string | — |
| defaultValue Initial selection when uncontrolled. | string | — |
| variant Swatch shape. | "circle" | "square" | "pill" | "circle" |
| size 28 / 36 / 44pt swatches. | "sm" | "md" | "lg" | "md" |
| scrollable One horizontally scrolling row instead of a wrapping grid. | boolean | false |
| showLabels Colour names under each swatch. | boolean | false |
| disabled Dims and blocks presses. | boolean | false |
| style Style for the wrapping grid (the ScrollView when scrollable). | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Tap a swatch to choose it. Each swatch's hit area is padded out to 44pt.
- Motion
- The chosen swatch settles inward while a ring and check spring out. The check uses whichever ink reads best on that colour.
- Screen readers
- A radiogroup labelled "Colour" by default; each swatch is a radio named by its label or hex value.
Source
Did you like the content?