Overview

ColorPalette displays labeled color collections as horizontal or vertical strips—perfect for documenting color ramps, scales, brand palettes, and semantic token sets.

These layouts are intentionally flexible and easy to reshape. You get a pre-composed ColorPalette for speed, plus primitives (ColorSwatch, ColorSwatchLabel, ColorPaletteLabel) to build custom layouts like grids or asymmetric compositions.

Installation

npx shadcn@latest add @tokenui/color-palette

Usage

The default ColorPalette component is the fastest way to render a collection of colors with automatic labels and hover states.

Indigo

#e0e7ff

#c7d2fe

#a5b4fc

#818cf8

#6366f1

#4f46e5

#4338ca

#3730a3

#312e81

Customize swatches

Brand Ramp (with Scores)

AAA

Vertical layout

Toggle the layout with orientation="vertical" for tight sidebars or detailed token lists:

Blue

#eff6ff

#bfdbfe

#60a5fa

#1d4ed8

Fuchsia

#fdf4ff

#f5d0fe

#e879f9

#a21caf

API Reference

ColorPalette

Pre-composed palette component with labels shown by default.

Prop

Type

ColorSwatch

A single color swatch in a palette.

Prop

Type

ColorSwatchLabel

Label displayed on hover inside a color swatch.

ColorPaletteLabel

Label displayed above a palette.

Color Palette