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 CustomRenderFunction() {
return (
<ColorArea
defaultValue="rgb(116, 52, 255)"
render={(props) => <div {...props} data-custom="slider" />}
>
<ColorArea.Thumb render={(props) => <div {...props} data-custom="thumb" />} />
</ColorArea>
);
}
export default CustomRenderFunction
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...