ColorSwatch

Import

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

Usage

Sizes

Shapes

Transparency

Custom Styles with Render Props

You can use the style render props to access the color value and create custom visual effects.

Accessibility

Use colorName to provide a custom accessible name for the color, and aria-label to add context about how the color is used.

Custom Render Function

Styling

Passing Tailwind CSS classes

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

function CustomColorSwatch() {
  return (
    <ColorSwatch
      className="size-12 rounded-lg"
      color="#0485F7"
    />
  );
}

Customizing the component classes

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

@layer components {
  .color-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 ColorSwatch component uses these CSS classes (View source styles):

Base Classes

• .color-swatch - Base swatch styles with checkered background for transparency

Shape Classes

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

Size Classes

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

API Reference

ColorSwatch Props

Style Render Props

When using the style prop as a function, you receive render props with access to the color:

<ColorSwatch
  color="#0485F7"
  style={({ color }) => ({
    boxShadow: `0 4px 14px ${color.toString("css")}80`,
  })}
/>

The color object provides methods like:

• color.toString("css") - Returns CSS color string
• color.toString("hex") - Returns hex color string
• color.getChannelValue("alpha") - Returns alpha channel value