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.
This article provides practical examples of using CSS properties and CSS custom properties in your component manifests.
A simple text component with standard CSS properties:
A button component using CSS custom properties (CSS variables):
Your component CSS must reference these variables:
Both CSS properties and CSS custom properties can be defined on nested elements within your component.
Separate design controls are displayed to users for each element when selected.
A button showing CSS properties with state variations:
A card component with nested text, image, a drop shadow filter, and a custom property for content spacing:
Component CSS: