Components
Loading preview...
A 2D color picker for selecting colors from a gradient area.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/heroui-color-area"use client";
import { useState } from "react";
import { ColorArea, ColorSwatch, parseColor, type ColorValue } from "@/components/ui/heroui-color-area";
export default function ControlledDemo() {
const [color, setColor] = useState<ColorValue>(parseColor("#9B80FF"));
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex flex-col gap-4">
<ColorArea colorSpace="rgb" value={color} xChannel="red" yChannel="green" onChange={setColor}>
<ColorArea.Thumb />
</ColorArea>
<div className="flex w-[300px] items-center gap-3">
<ColorSwatch color={color} size="md" />
<p className="text-sm text-muted">
Current color: <span className="font-medium">{color ? color.toString("hex") : "(empty)"}</span>
</p>
</div>
</div>
</div>
);
}
export { ControlledDemo };