ColorPicker

Beta

Color palette selector displayed in a bottom sheet with an input-like color swatch trigger.

Installation

npm install @xaui/native

Import

import { ColorPicker, defaultColorGroups } from '@xaui/native/color-picker'

Basic Usage

Minimal example showing the component with its default configuration.

import { ColorPicker } from '@xaui/native/color-picker'

export function Example() {
  return <ColorPicker />
}

Basic

import { useState } from 'react'
import { ColorPicker } from '@xaui/native/color-picker'

export function BasicExample() {
  const [color, setColor] = useState('')

  return (
    <ColorPicker
      label="Brand color"
      value={color}
      onColorChange={setColor}
    />
  )
}

Custom palette

import { useState } from 'react'
import { ColorPicker } from '@xaui/native/color-picker'

const brandColors = [
  {
    name: 'Brand',
    colors: ['#6366f1', '#8b5cf6', '#ec4899', '#f97316', '#22c55e'],
  },
]

export function CustomPaletteExample() {
  const [color, setColor] = useState('')

  return (
    <ColorPicker
      label="Brand color"
      colorGroups={brandColors}
      value={color}
      onColorChange={setColor}
    />
  )
}