New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,052

ColorPalette

Watch a video tutorial on the Storybook channel

The ColorPalette block allows you to document all color-related items (e.g., swatches) used throughout your project.

Screenshot of ColorPalette and ColorItem blocks

Colors.mdx
Loading...

ColorPalette

Loading...

ColorPalette is configured with the following props:

children

Type: React.ReactNode

ColorPalette expects only ColorItem children.

ColorItem

Loading...

ColorItem is configured with the following props:

colors

(Required)

Type: string[] | { [key: string]: string }

Provides the list of colors to be displayed. Accepts any valid CSS color format (hex, RGB, HSL, etc.). When an object is provided, the keys will be displayed above the values.

subtitle

(Required)

Type: string

Provides an additional description of the color.

title

(Required)

Type: string

Sets the name of the color to be displayed.

Was this page helpful?

Markdown accepted ([link text](url), _italic_, **bold**, etc). Your anonymous feedback will be posted publicly on GitHub.

✍️ Edit on GitHub – PRs welcome!
Storybook
Join the community
6,495 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI