Installation
npx @park-ui/cli add color-pickerAdd Component
Copy the code snippet below into you components folder.
'use client'
import { ColorPicker } from '@ark-ui/react/color-picker'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { colorPicker } from 'styled-system/recipes'
const { withProvider, withContext } = createStyleContext(colorPicker)
export type RootProps = ComponentProps<typeof Root>
export const Root = withProvider(ColorPicker.Root, 'root')
export const RootProvider = withProvider(ColorPicker.RootProvider, 'root')
export const Area = withContext(ColorPicker.Area, 'area')
export const AreaBackground = withContext(ColorPicker.AreaBackground, 'areaBackground')
export const AreaThumb = withContext(ColorPicker.AreaThumb, 'areaThumb')
export const ChannelInput = withContext(ColorPicker.ChannelInput, 'channelInput')
export const ChannelSlider = withContext(ColorPicker.ChannelSlider, 'channelSlider')
export const ChannelSliderLabel = withContext(ColorPicker.ChannelSliderLabel, 'channelSliderLabel')
export const ChannelSliderThumb = withContext(ColorPicker.ChannelSliderThumb, 'channelSliderThumb')
export const ChannelSliderTrack = withContext(ColorPicker.ChannelSliderTrack, 'channelSliderTrack')
export const ChannelSliderValueText = withContext(
ColorPicker.ChannelSliderValueText,
'channelSliderValueText',
)
export const Content = withContext(ColorPicker.Content, 'content')
export const Control = withContext(ColorPicker.Control, 'control')
export const EyeDropperTrigger = withContext(ColorPicker.EyeDropperTrigger, 'eyeDropperTrigger')
export const FormatSelect = withContext(ColorPicker.FormatSelect, 'formatSelect')
export const FormatTrigger = withContext(ColorPicker.FormatTrigger, 'formatTrigger')
export const HiddenInput = ColorPicker.HiddenInput
export const Label = withContext(ColorPicker.Label, 'label')
export const Positioner = withContext(ColorPicker.Positioner, 'positioner')
export const Swatch = withContext(ColorPicker.Swatch, 'swatch')
export const SwatchGroup = withContext(ColorPicker.SwatchGroup, 'swatchGroup')
export const SwatchIndicator = withContext(ColorPicker.SwatchIndicator, 'swatchIndicator')
export const SwatchTrigger = withContext(ColorPicker.SwatchTrigger, 'swatchTrigger')
export const TransparencyGrid = withContext(ColorPicker.TransparencyGrid, 'transparencyGrid')
export const Trigger = withContext(ColorPicker.Trigger, 'trigger')
export const ValueSwatch = ColorPicker.ValueSwatch
export const ValueText = withContext(ColorPicker.ValueText, 'valueText')
export const View = withContext(ColorPicker.View, 'view')
export { ColorPickerContext as Context } from '@ark-ui/react/color-picker'
Integrate Recipe
Integrate this recipe in to your Panda config.
import { colorPickerAnatomy } from '@ark-ui/react/color-picker'
import { defineSlotRecipe } from '@pandacss/dev'
export const colorPicker = defineSlotRecipe({
className: 'color-picker',
slots: colorPickerAnatomy.keys(),
base: {
root: {
display: 'flex',
flexDirection: 'column',
gap: '1.5',
},
label: {
color: 'fg.default',
fontWeight: 'medium',
textStyle: 'sm',
},
control: {
display: 'flex',
flexDirection: 'row',
gap: '2',
},
content: {
background: 'gray.surface.bg',
borderRadius: 'l3',
boxShadow: 'lg',
display: 'flex',
flexDirection: 'column',
maxWidth: 'sm',
p: '4',
zIndex: 'dropdown',
_open: {
animation: 'fadeIn 0.25s ease-out',
},
_closed: {
animation: 'fadeOut 0.2s ease-out',
},
_hidden: {
display: 'none',
},
},
area: {
height: '36',
borderRadius: 'l2',
overflow: 'hidden',
},
areaThumb: {
borderRadius: 'full',
height: '2.5',
width: '2.5',
boxShadow: 'white 0px 0px 0px 2px, black 0px 0px 2px 1px',
outline: 'none',
},
areaBackground: {
height: 'full',
},
channelSlider: {
borderRadius: 'l2',
},
channelSliderTrack: {
height: '3',
borderRadius: 'l2',
},
swatchGroup: {
display: 'grid',
gridTemplateColumns: 'repeat(7, 1fr)',
gap: '2',
background: 'gray.surface.bg',
},
swatch: {
height: '6',
width: '6',
borderRadius: 'l2',
boxShadow:
'0 0 0 1px var(--colors-border-emphasized), 0 0 0 2px var(--colors-bg-default) inset',
},
channelSliderThumb: {
borderRadius: 'full',
height: '2.5',
width: '2.5',
boxShadow: 'white 0px 0px 0px 2px, black 0px 0px 2px 1px',
transform: 'translate(-50%, -50%)',
outline: 'none',
},
transparencyGrid: {
borderRadius: 'l2',
},
},
})
Usage
import { ColorPicker } from '@/components/ui'
<ColorPicker.Root>
<ColorPicker.Control>
<ColorPicker.ChannelInput channel="hex" />
<ColorPicker.Trigger>
<ColorPicker.Swatch value="#000000" />
</ColorPicker.Trigger>
</ColorPicker.Control>
</ColorPicker.Root>
Props
Root
| Prop | Default | Type |
|---|---|---|
closeOnSelect | false | booleanWhether to close the color picker when a swatch is selected |
defaultFormat | \rgba\ | ColorFormatThe initial color format when rendered. Use when you don't need to control the color format of the color picker. |
defaultValue | #000000 | ColorThe initial color value when rendered. Use when you don't need to control the color value of the color picker. |
lazyMount | false | booleanWhether to enable lazy mounting |
openAutoFocus | true | booleanWhether to auto focus the color picker when it is opened |
skipAnimationOnMount | false | booleanWhether to allow the initial presence animation. |
unmountOnExit | false | booleanWhether to unmount on exit. |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
defaultOpen | booleanThe initial open state of the color picker when rendered. Use when you don't need to control the open state of the color picker. | |
disabled | booleanWhether the color picker is disabled | |
format | ColorFormatThe controlled color format to use | |
id | stringThe unique identifier of the machine. | |
ids | Partial<{ root: string; control: string; trigger: string; label: string; input: string; hiddenInput: string; content: string; area: string; areaGradient: string; positioner: string; formatSelect: string; areaThumb: string; channelInput: (id: string) => string; channelSliderTrack: (id: ColorChannel) => string; channe...The ids of the elements in the color picker. Useful for composition. | |
immediate | booleanWhether to synchronize the present change immediately or defer it to the next frame | |
initialFocusEl | () => HTMLElement | nullThe initial focus element when the color picker is opened. | |
inline | booleanWhether to render the color picker inline | |
invalid | booleanWhether the color picker is invalid | |
name | stringThe name for the form input | |
onExitComplete | VoidFunctionFunction called when the animation ends in the closed state | |
onFocusOutside | (event: FocusOutsideEvent) => voidFunction called when the focus is moved outside the component | |
onFormatChange | (details: FormatChangeDetails) => voidFunction called when the color format changes | |
onInteractOutside | (event: InteractOutsideEvent) => voidFunction called when an interaction happens outside the component | |
onOpenChange | (details: OpenChangeDetails) => voidHandler that is called when the user opens or closes the color picker. | |
onPointerDownOutside | (event: PointerDownOutsideEvent) => voidFunction called when the pointer is pressed down outside the component | |
onValueChange | (details: ValueChangeDetails) => voidHandler that is called when the value changes, as the user drags. | |
onValueChangeEnd | (details: ValueChangeDetails) => voidHandler that is called when the user stops dragging. | |
open | booleanThe controlled open state of the color picker | |
positioning | PositioningOptionsThe positioning options for the color picker | |
present | booleanWhether the node is present (controlled by the user) | |
readOnly | booleanWhether the color picker is read-only | |
required | booleanWhether the color picker is required | |
value | ColorThe controlled color value of the color picker |
Area
| Prop | Default | Type |
|---|---|---|
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
xChannel | ColorChannel | |
yChannel | ColorChannel |
ChannelInput
| Prop | Default | Type |
|---|---|---|
channel* | ExtendedColorChannel | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
orientation | Orientation |
ChannelSlider
| Prop | Default | Type |
|---|---|---|
channel* | ColorChannel | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
orientation | Orientation |
Swatch
| Prop | Default | Type |
|---|---|---|
value* | string | ColorThe color value | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
respectAlpha | booleanWhether to include the alpha channel in the color |
SwatchTrigger
| Prop | Default | Type |
|---|---|---|
value* | string | ColorThe color value | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
disabled | booleanWhether the swatch trigger is disabled |
TransparencyGrid
| Prop | Default | Type |
|---|---|---|
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
size | string |
ValueSwatch
| Prop | Default | Type |
|---|---|---|
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
respectAlpha | booleanWhether to include the alpha channel in the color |
ValueText
| Prop | Default | Type |
|---|---|---|
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. | |
format | ColorStringFormat |
View
| Prop | Default | Type |
|---|---|---|
format* | ColorFormat | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. |