Color Picker

Renders a color picker interface for selecting colors. It allows interaction through a hue slider and a color selection area. Use it when users need to pick a color for design or customization purposes.

byShadcnblocks.com from Kibo UI

Installation

terminal

pnpm dlx layro-cli add @shadcnblocks/color-picker

npx layro-cli add @shadcnblocks/color-picker

npx layro-cli add @shadcnblocks/color-picker

bunx layro-cli add @shadcnblocks/color-picker

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import Color from "color";
import { PipetteIcon } from "lucide-react";
import { Slider } from "radix-ui";
import {
  type ComponentProps,
  createContext,
  type HTMLAttributes,
  memo,
  useCallback,
  useContext,
  useEffect,
  useMemo,