Color Area

A color area allows users to select a color from a two-dimensional gradient.

<ColorArea />

Installation

npx shadcn@latest add @dotui/color-area

Usage

Use color areas to allow users to select a color from a two-dimensional gradient.

import { ColorArea, ColorAreaThumb } from "@/components/ui/color-area";
<ColorArea defaultValue="#ff0000">
  <ColorAreaThumb />
</ColorArea>

On this page

Last updated on 1/13/2026

On this page

Built with passion by @mehdibha.