Style Panel

Styles are configured on the component where you can add 4 different sections (position, dimensions, layout, and styles). All stylable sections automatically bind to the first stylable instance inside a composed component, for code components, a className property is passed

Position

Provides position options. Usually, you’ll want this in all your composed components.

position select optionposition select option

Position select option

list of available position optionslist of available position options

List of available position options

Property options to determine the final location of the positioned component.Property options to determine the final location of the positioned component.

Property options to determine the final location of the positioned component.

Dimensions

Input to define the Width and Height values of the component. Usually, you’ll want this in all your composed components

Width and Height dimensions inputWidth and Height dimensions input

Width and Height dimensions input

Layout

Gives layout options, NOT recommended for a composed component unless you’re building a primitive like Box.
This Layout feature will work similarly to the auto layout feature that Figma uses.

Layout optionLayout option

Layout option

To add layout styles you will need to first select the + to add your styles.

Layout style editorLayout style editor

Layout style editor

The layout editor provides a set of options for setting the layout of your components using CSS flexbox.

Styles

Free-form option where you can add CSS properties and rules as you see fit.
NOT recommended to be used with a composed component unless you’re building a primitive element component.

Styles optionStyles option

Styles option

The Add CSS property is an auto-complete input. When you begin typing a list of options you are looking for will show up as a selection.

autocomplete on the styles inputautocomplete on the styles input

autocomplete on the styles input

The Styels section will override any Position, Dimension, or Layout options you have set. For example, if you have set the Width and Height in the dimensions section, and then you set the Width and Height in the Styels section. The component will use the properties from the Styles section.


More Info

📘

Watch an overview of properties panel

📘

To learn more about CSS, visit MDN documentation