Alpha: Editor React Components are currently in alpha. This feature is subject to change and may have bugs, issues, and limitations. We're actively improving it based on your feedback.
Linking your component to the site's theme keeps it visually consistent with everything around it.
When the owner changes the theme, your component changes with it, without any work on your part.
Editor React Components run on Wix Harmony sites, which expose their theme as CSS variables on the page. Your component inherits those variables, so you can reference them directly in your CSS.
A Harmony site exposes two sets of theme variables, and an Editor React Component receives both:
Prefer the Harmony set. It's more specific, and it maps directly to the styles the site owner sees in the editor's Site Brand panel.
Use theme variables in your component's CSS module, with a fallback value so the component still renders if a variable is unavailable. The following example styles a card, its title, and its body text:
Run wix build, then wix generate manifest. The manifest generator works from the last build, so it silently skips any component you haven't built yet.
The CLI reads your CSS module and carries any var() expression it finds into the manifest as the defaultValue for that property. The theme reference is preserved, fallback included, as in the following example:
This matters because of where each source sits in the editor's priority order. As described in How the Editor Resolves CSS Property Values, your CSS file is the lowest priority source, and manifest defaults sit above it.
Carrying the theme reference into the manifest keeps it in effect as the component's default, and the site owner can still override it in the design panel.
Tip: Rerun wix generate manifest after changing theme variables in your CSS, so the manifest defaults stay in step with your stylesheet.
Both site theme variables and the manifest's cssCustomProperties are CSS custom properties, so it's worth being clear on which is which.
| Site theme variables | cssCustomProperties | |
|---|---|---|
| Defined by | Wix | You, in the manifest |
| Named | --wst-* | Anything you choose |
| Source of the value | The site's theme | The site owner, through a control you configure |
| Purpose | Follow the site's design | Expose a style choice specific to your component |
The two work together. A custom property can take a theme variable as its default, so the component starts on-theme and the owner can change it. The following example defines an accent color that starts from the site's links and actions color:
The editor sets a custom property on the element once the Wix user customizes it, so until then your CSS fallback is what renders. Give every var() a fallback that matches the default in the manifest.
Switching the site's brand kit changes the palette and the fonts, and everything derived from them changes too.
Switch brand kits in the Site Brand panel and confirm your component still reads well, particularly where you have set a color against a background you don't control.
Last updated: 6 August 2026