Cromia Compact

Forms 18

About

A compact Cromia color picker with an area selector, hue slider, and editable hexadecimal color input.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cromia Compact to your project and fits it to your theme.

Code

How Cromia Compact is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import CromiaCompact from "@/components/ui/cromia-compact"

const settings = { hue: 258, saturation: 64, brightness: 96 }

export default function Demo(props: Partial<typeof settings>) {
  const values = { ...settings, ...props }
  return (
    <div className="flex min-h-[560px] w-full items-center justify-center p-8">
      <CromiaCompact {...values} />
    </div>
  )
}