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.
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 style or color conditionally, so it changes based on data or state — for example, a row background that turns red when a value exceeds a threshold.
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.
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.
Per-Component Theme Variants (from the Theme)
Beyond individual appearance settings, the theme's Components area allows restyling whole component families. This is different from per-block overrides — it applies to every instance of that component in every app using the theme.
Which components can be themed
Only these fifteen components carry a full style editor in the theme. Everything else supports hide and rename only:
Button, Link, Icon Button, Icon, Button Group, Text Input, Text Area, Toggle, Checkbox, Radio Button, Tag, Typography, Loader, Calendar, and Snackbar.
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
Per-block Appearance settings (highest for that block instance)
Copying Appearance Between Components
Use Copy appearance to / Copy appearance from another component (and copy/paste styles) to reuse styling quickly across similar components. This copies all style overrides from the source component's Appearance tab to the target.
Component Variants in the Theme
Each themeable component's editor works on three axes:
Variants
The option sets a builder sees when configuring that component (for example, a button's Color, Size, and Variant dimensions). The theme curates these lists — standard options ship with the platform, and you can add custom ones or disable ones you don't want offered.
States
The interactive states a component can be in: Hover, Pressed, Focused, Disabled, and others. Styles set on a state apply on top of the base look.
Custom CSS per component
A free-form CSS box in the component's theme editor for anything the visual panels don't cover. This custom CSS sits above the compiled visual styles and is automatically scoped to the app's themed area.
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.
Frequently Asked Questions
Should I use a theme token or a custom hex for a block's background color?
Prefer a theme token. A block using a theme token re-colors automatically when the theme changes, keeping your app consistent. Use a custom hex only for one-off exceptions that intentionally deviate from the design system.
Why can't I restyle a certain component from the Components tab?
Only 15 specific components support a full style editor: Button, Link, Icon Button, Icon, Button Group, Text Input, Text Area, Toggle, Checkbox, Radio Button, Tag, Typography, Loader, Calendar, and Snackbar. Everything else supports hide and rename only. For unsupported components, use per-block Appearance settings or Tokens & CSS overrides.
My per-block custom CSS has no effect on a dropdown. Why?
Dropdowns, tooltips, and date pickers render as floating content outside the block's DOM subtree. Per-block CSS is scoped to the block and can't reach content outside it. Move the rule to the app-wide Tokens & CSS tab to style floating content.
Can I apply styles conditionally based on data?
Yes. In the Appearance panel, most color and style controls support conditional expressions. Set a style only when a condition is true — for example, a row background that turns red when a value exceeds a threshold.
Related Pages
Design System & Themes Screen — navigating the theme editor
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