CSS GUIv0.0.247DocsPropertiesGitHubLog inSign up

Color

A fully-featured color input for all color spaces on the web.

There are two color inputs that are available, the popover and the picker. The popover is a collapsed input that exposes the picker on click, while the picker is the exposed controls.

Usage

You can import either the ColorPopover or the ColorPicker based on your needs. They have the same color/onChange props API.

Color popover

import { useState } from 'react'
import { ColorPopover } from '@compai/css-gui'

const MyEditor = () => {
  const [color, setColor] = useState('tomato')

  return (
    <>
      <ColorPopover value={color} onChange={setColor} />
      <p style={{ color }}>I am {color}!</p>
    </>
  )
}

Color picker

import { useState } from 'react'
import { ColorPicker } from '@compai/css-gui'

const MyEditor = () => {
  const [color, setColor] = useState('tomato')

  return (
    <>
      <ColorPicker value={color} onChange={setColor} />
      <p style={{ color }}>I am {color}!</p>
    </>
  )
}

Example

I am tomato!