ColorSwatchPickerNew

Import

import { ColorSwatchPicker, parseColor } from '@heroui/react';

Usage

import {ColorSwatchPicker} from "@heroui/react";

const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"];

export function Basic() {

Anatomy

Import the ColorSwatchPicker component and access all parts using dot notation.

import { ColorSwatchPicker } from '@heroui/react';

export default () => (
  <ColorSwatchPicker>
    <ColorSwatchPicker.Item color="#F43F5E">
      <ColorSwatchPicker.Swatch />
      <ColorSwatchPicker.Indicator />
    </ColorSwatchPicker.Item>
    <ColorSwatchPicker.Item color="#D946EF">
      <ColorSwatchPicker.Swatch />
      <ColorSwatchPicker.Indicator />
    </ColorSwatchPicker.Item>
    <ColorSwatchPicker.Item color="#8B5CF6">
      <ColorSwatchPicker.Swatch />
      <ColorSwatchPicker.Indicator />
    </ColorSwatchPicker.Item>
  </ColorSwatchPicker>
);

Variants

import {ColorSwatchPicker} from "@heroui/react";

const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"];

export function Variants() {

Sizes

import {ColorSwatchPicker} from "@heroui/react";

const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"];

const sizes = ["xs", "sm", "md", "lg", "xl"] as const;

Stack Layout

import {ColorSwatchPicker} from "@heroui/react";

const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"];

export function StackLayout() {

Default Value

import {ColorSwatchPicker} from "@heroui/react";

const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"];

export function DefaultValue() {

Controlled

"use client";

import {ColorSwatchPicker, parseColor} from "@heroui/react";
import {useState} from "react";

Disabled

import {ColorSwatchPicker} from "@heroui/react";

const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"];

export function Disabled() {

Custom Indicator

import {HeartFill} from "@gravity-ui/icons";
import {ColorSwatchPicker} from "@heroui/react";

export function CustomIndicator() {
  const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"];

Styling

Passing Tailwind CSS classes

You can customize the ColorSwatchPicker using className props:

import { ColorSwatchPicker } from '@heroui/react';

function CustomColorSwatchPicker() {
  return (
    <ColorSwatchPicker className="gap-4">
      <ColorSwatchPicker.Item color="#F43F5E" className="shadow-lg">
        <ColorSwatchPicker.Swatch />
      </ColorSwatchPicker.Item>
      <ColorSwatchPicker.Item color="#D946EF">
        <ColorSwatchPicker.Swatch />
      </ColorSwatchPicker.Item>
    </ColorSwatchPicker>
  );
}

Customizing the component classes

To customize the ColorSwatchPicker component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .color-swatch-picker {
    @apply gap-4;
  }

  .color-swatch-picker__item {
    @apply shadow-md;
  }

  .color-swatch-picker__swatch {
    @apply border-2 border-white;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ColorSwatchPicker component uses these CSS classes (View source styles):

Base & Structure

• .color-swatch-picker - Base container (flex layout)
• .color-swatch-picker__item - Individual swatch item wrapper
• .color-swatch-picker__swatch - The color swatch visual element

Size Classes

• .color-swatch-picker--xs - Extra small (16px)
• .color-swatch-picker--sm - Small (24px)
• .color-swatch-picker--md - Medium (32px, default)
• .color-swatch-picker--lg - Large (36px)
• .color-swatch-picker--xl - Extra large (40px)

Shape Variants

• .color-swatch-picker--circle - Circle shape (default)
• .color-swatch-picker--square - Square shape with rounded corners

Layout Classes

• .color-swatch-picker--grid - Horizontal wrapping layout (default)
• .color-swatch-picker--stack - Vertical stacked layout

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

• Hover: :hover or [data-hovered="true"] - Scale up to 1.1 (only when not selected)
• Focus: :focus-visible or [data-focus-visible="true"] - Focus ring
• Selected: [data-selected="true"] - Inner border with same color as swatch
• Disabled: [data-disabled="true"] - Reduced opacity

API Reference

ColorSwatchPicker Props

Inherits from React Aria ColorSwatchPicker.

ColorSwatchPicker.Item Props

ColorSwatchPicker.Swatch Props

parseColor

The parseColor function is re-exported from React Aria Components for convenience:

import { parseColor } from '@heroui/react';

// Parse hex color
const red = parseColor('#ff0000');

// Parse RGB
const green = parseColor('rgb(0, 255, 0)');

// Parse HSL
const blue = parseColor('hsl(240, 100%, 50%)');