The Appearance Panel is your dedicated interface for applying the visual styling to the components within your layout. It acts as the primary control surface for the CSS properties of a selected component, allowing you to manage everything from color and typography to advanced Flexbox positioning.

To use the panel, select a component on the Canvas. Its styling options will then appear in the Appearance Panel, which is accessed by clicking the paintbrush icon in the Right Sidebar.

Sections of the Appearance Panel

The Appearance Panel is organized into the following categories to help you quickly locate the properties you need:

• Typography: Customize the font, weight, size, and color of text components.
• Layout: Control the arrangement and alignment of child components using principles of Flexbox for distribution and flow.
• Size: Define a component's dimensions using fixed or responsive values.
• Spacing: Use padding (internal spacing) and margin (external spacing) to manage the distance around a component.
• Position: Define how a component is rendered relative to its parent or the application viewport.
• Background: Apply colors, images, or gradients to the component's background area.
• Opacity: Control the component's transparency level.
• Effects: Add visual flair such as borders, shadows, and corner radius.
• 2D&3D Transforms: Apply rotation, scaling, skew, or perspective changes to the component's visual rendering.
• Other: Contains component-specific or advanced styling properties not covered by the main categories.