Components & Styling

Edit component trees, tweak styles, and customize properties

Components & Styling

Each screen contains a tree of components -- buttons, text blocks, images, and layout containers. Select any component to inspect and edit its properties in the right sidebar.

Component tree

Components are nested in a hierarchy. A screen might contain a vertical stack (VStack) with a heading (Text), an image (Image), and a button (Button). Layout containers hold children; leaf components like Text and Image do not.

You can view and navigate this hierarchy in two ways:

• On the canvas -- Click directly on a component in the screen preview. The editor highlights it and opens the inspector.
• Layers panel -- Open the Layers tab in the left sidebar to see the full tree. Click any row to select that component.

Selecting components

The Studio uses a drill-down selection model similar to design tools like Figma.

Single click

Click a component in the preview to select it. The editor selects the highest relevant ancestor within the current context, not the deepest element under your cursor. This keeps selection predictable when components are nested.

Double click

Double-click to drill one level deeper into the hierarchy. If you double-click on a text node, the editor activates inline text editing instead of drilling further.

Deep select

Hold Cmd (Mac) or Ctrl (Windows) and click to select the exact component under your cursor, bypassing the drill-down logic.

Multi-select

Hold Cmd/Ctrl and click additional components to add or remove them from your selection. In the Layers panel, the same modifier key toggles individual items.

When multiple components are selected, the inspector shows shared properties. Changing a value applies it to all selected components. Properties that differ across the selection display a "mixed" indicator.

Inspector panel

The right sidebar in Design mode shows the inspector for the selected component. Available controls depend on the component type.

Text editing

Select a text component and edit its content directly in the inspector. You can also double-click text on the canvas to enter inline editing mode.

Tailwind styling

Components use Tailwind CSS utility classes for styling. The inspector provides visual controls for common properties:

• Layout -- Flex direction, alignment, gap, padding, margin
• Typography -- Font size, weight, line height, letter spacing, text alignment
• Colors -- Background, text color, border color (using theme tokens when available)
• Spacing -- Padding and margin with per-side controls
• Borders -- Width, radius, style
• Effects -- Opacity, overflow, shadows

Each control reads and writes Tailwind classes on the component's className prop. You get the power of utility-first CSS with a visual interface.

Text styles

Apply a named text style (like Headline, Body, or Caption) to a text component for consistent typography across your flow. Text styles are defined per-theme and include font family, weight, size, line height, and tracking. See Themes for details on creating text styles.

Component-specific properties

Beyond styling, some components expose unique properties:

• Icon -- Choose an icon from the built-in icon library.
• Image -- Set a source URL or bind to a view model property.
• Button -- Configure variant, disabled state.
• Input components -- Bind value and change handlers to view model properties.

Structural edits

The Studio supports structural changes to the component tree:

• Wrap groups the selected components inside a new layout container.
• Unwrap removes the container and promotes its children to the parent level.
• Copy/Paste style copies all Tailwind classes from one component and applies them to another.

Layers panel

The Layers tab in the left sidebar provides a tree view of every screen and its components.

• Expand a screen row to see its component hierarchy. Hold Alt while clicking the expand arrow to expand all descendants.
• Click a row to select the corresponding screen or component on the canvas.
• Double-click a screen row to rename it inline.
• Hover a row to highlight the component on the canvas, and vice versa.
• Toggle visibility with the eye icon to hide or show individual screens and components.

Selection in the Layers panel stays synchronized with the canvas. Selecting a component in one place updates the other.

Next steps

• Data & Bindings -- Bind component properties to dynamic data from view models.
• Interactions -- Attach press, event, and navigation behaviors to components.
• AI Generation -- Generate entire component trees from natural language prompts.