Components
HeroUI v3 ColorArea is a 2D color picker surface for adjusting two channels of a color at once (e.g. saturation/brightness) via a draggable thumb. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value, disabled state, selectable color space & channels, a dotted-grid variant, and a custom render function. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-color-areaLoading preview...
"use client"
import { ColorArea } from "@/components/ui/heroui-color-area"
export function ColorAreaBasic() {
return (
<ColorArea defaultValue="rgb(116, 52, 255)">
<ColorArea.Thumb />
</ColorArea>
);
}
export default ColorAreaBasic
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...