Custom Component color type doesn't use defined color swatches

Builder public api key
c3e3257ff5594facbf478a68d37f766d

What are you trying to accomplish
Be able to use the defined color swatches that appear for Typography/Background, etc to be used for the color picker in custom components

Screenshots or video link
Predefined color swatches in Typography editor

“Stock” color swatches in custom component color picker
image

Code stack you are integrating Builder with
Next.JS in an NX monorepo

We just recently started adding custom components with color pickers as part of the input section. Unfortunately, the colors that show up in the color picker for these custom components do not even come close to the colors swatches that we spent quite a bit of time defining to adhere to our design system.

Should I be using something other than type: 'color' in the inputs section for these custom components to pull in the predefined colors?

Just bumping this up to see if there’s any help? This feels like a huge oversight and I’d love to get a good answer for how to fix this either on our end, or maybe in the Editor itself.

@chtbks-jason support for custom component color swatches was released earlier this week, maybe you’re getting a cached bundle, try a hard refresh.

1 Like

Hi @chtbks-jason,

What seems to be working for us with custom components is restricting color’s, you can try editing the swatches and restricting the color picker which should work for custom components as well now.


@aziz Yep, looks like it’s now working. Thanks so much, this is a HUGE improvement!

2 Likes