The Appearance Tab
Every selected component in the page builder has an Appearance tab in the properties panel on the right. This is where you style the selected component. It groups Style fields into collapsible sections — Layout, Layout Height, Layout Width, Background, and Border — plus Typography, a per-component Theme variant picker, and (when added) Custom CSS and HTML Attributes.
At the top of the tab, a component the theme styles shows its theme variant pickers — for a button, Color, Size and Variant. Below them, Visibility is the condition that shows or hides the block; when it hides the block, the space closes up. The style sections follow.
The exact sections available depend on the component, but the styling controls are consistent across all of them.
Style Sections
Layout
Controls the component's spatial arrangement and flow:
| Property | Options / Notes |
| Layout | Block, flex, grid, etc. |
| Width / Height | Set absolute size, or use Fill / Fit Content |
| Padding | Per-side values, in px |
| Margin | Per-side values, in px |
| Gap | Space between children |
| Position | Static, Relative, Absolute, Fixed, Sticky |
| Overflow | Visible, hidden, scroll, auto |
| Flex options | Wrap, direction, justify, align |
| Rotation | Degrees |
Layout Width / Layout Height
Min/max width and height constraints. Width can be Fill (takes available space), Fit Content (shrinks to content), or a fixed value.
Background
| Property | Notes |
| Background color | Theme token groups or custom hex with alpha |
| Hover color | Separate override for hover state |
| Background image | URL or uploaded image |
| Background size | Cover, contain, or custom |
| Box shadow | Shadow definitions including color |
Border
| Property | Options |
| Border width | px |
| Border style | Solid, Dashed, Dotted |
| Border color | Theme token groups or custom hex |
| Corner radius | px, per-corner or uniform |
Theme Tokens vs. Custom Colors
Color controls (for backgrounds, borders, text, and shadows) offer your theme token groups first — Brand Colors, Status Colors, Secondary Colors — and then a custom hex with alpha.
Tip: Prefer theme tokens. A component using a theme token re-colors automatically when the theme changes. Use a custom hex only for one-off exceptions that shouldn't follow the theme. This keeps your app visually consistent as your design system evolves.
You can also set a color conditionally, so it changes based on data or state — for example, a row background that turns red when a value exceeds a threshold. In the color control, choose Set Color Conditions and add the condition and the color to use when it is true. See Conditions & Visibility.
Custom CSS per Component
Use Custom CSS (added from the component's actions menu) to write CSS that's scoped to that component. The editor validates as you type — invalid CSS shows "Invalid CSS syntax detected".
Warning: Custom CSS can't reach pop-out content. CSS scoped to a block cannot style floating content — dropdown menus, date-picker calendars, tooltips, and popovers that render outside the block's DOM subtree. To style those, use the app-wide Tokens & CSS tab instead. See Tokens & Custom CSS.
To remove per-block custom CSS, use Remove Custom CSS from the actions menu (it confirms first). On mobile apps, custom CSS is replaced by style JSON rather than raw CSS.
HTML Attributes & Pseudo-State Styles
HTML Attributes
Let you add key/value attributes to the component's rendered element — useful for IDs, data attributes, and accessibility. Add, edit, and remove them from the component's actions menu.
Pseudo-state styles
Separate Default, Hover, and Focus styling for a component's background and border, so it can change appearance on hover or focus without custom CSS.
Theme-Level Component Styles
The theme can also restyle whole component families. Unlike per-block settings, a theme component style applies to every instance of that component in every app that uses the theme. Sixteen components have a full style editor in the theme — Button, Link, Icon Button, Icon, Button Group, Text Input, Text Area, Toggle, Checkbox, Radio Button, Tag, Typography, Loader, Calendar, Image and Snackbar — each with its own Variants, States and Custom CSS. See Design System & Themes Screen.
Style precedence
Styles applied at different levels follow this priority (highest wins):
Platform default tokens (lowest)
Theme-level tokens (colors, typography, borders)
Per-component theme styles (Components tab)
Global Tokens & CSS overrides — applied last within the theme, so they win every tie
Per-block Appearance settings and per-block Custom CSS (highest, for that block instance)
Between the two per-block layers on a web app: per-block Custom CSS beats an Appearance preset, but a value you typed yourself in Appearance wins unless you mark the CSS rule !important.
Copying Appearance Between Components
To reuse styling across similar components, open the source component's actions menu (the three-dot icon at the top of the properties panel, or right-click it in the Hierarchy panel) and choose Copy styles. Then select the target component and choose Paste styles from the same menu. Paste styles is available only when copied styles are on your clipboard.
Trade-offs & Gotchas
Setting a value back to the theme default removes the per-block override. The component then follows the theme again rather than retaining a null override.
Component styles sit between tokens and theme-wide overrides. If a component style seems ignored, check whether a global Tokens & CSS override is claiming the same property.
Dark-mode component styles need a theme that supports dark. Per-component dark styles are emitted only when the theme supports dark mode — they never fire on a light-only theme.
Some component settings aren't CSS at all. A few options (like the snackbar's on-screen position) change behavior rather than appearance. These are stored as configuration and won't respond to CSS overrides — change them through the component's controls.
Related Pages
Design System & Themes Screen — navigating the theme editor and theme component styles
Theme Builder — overview of the full theme system
Tokens & Custom CSS — app-wide overrides that sit above component styles
Colors & Color Scheme — the palette component styles draw from
Configuring a Component — the properties panel and its actions menu