Once you've structured your application using Layouts, your next step is adding and arranging Components to create the user interface.

Adding Components to Layouts

You have two efficient methods for adding components to your design:

1. Drag and Drop:
2. • Open the Components Panel in the Left Sidebar.
   • Drag the desired component from the list onto the Layout Canvas.
   • A blue indicator line will appear on the canvas to show the exact position where the component will be inserted.
   • Components like View and Background Image can act as containers. You can drag child components directly into them on the Canvas or within the Structure Panel.
3. Using the Command Palette (Shortcut):
4. • Use the shortcut Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows) to open the Command Palette.
   • Type the name of the component you want (e.g., "Text Input").
   • Select the component from the list and hit Enter. The component will be automatically inserted into the currently selected container or at the end of the Layout.

Reordering Components

Organizing the hierarchy of your UI is essential. You can reorder components in a Layout using the following methods:

• Layout Canvas (Visual Move): Click on a component to select it, then drag the component to a new location on the Canvas. The blue indicator line will guide your placement.
• Structure Panel (Layer Management): The Structure Panel (in the Left Sidebar) provides a tree view of your Layout's hierarchy. You can click and drag the component's layer to a new position within its parent container. This is particularly useful for reordering components that are nested deep within a Layout.

Selecting Components

Selecting a component is the first step in applying styles, binding data, or configuring interactions.

• Click on the Canvas: Simply click on a component on the Canvas to select it. Once selected, the Right Sidebar will update to show component-specific configuration panels, such as Appearance, Settings, and Universal Access.

💡💡💡 Tip 💡💡💡

If a component is very small or nested deeply, it can be difficult to select visually. Use the Structure Panel to precisely select the correct component layer.

• Shareable URL: When a component is selected, the URL in your browser will automatically update to include a unique identifier for that specific component. You can then bookmark the page or share the URL with a teammate to highlight the exact component for review or collaboration.

Components Context Menu

Right-click on any component on the Canvas to access the context menu, which contains essential component management actions:

• Copy ID: Copies the unique identifier for the component. This ID can be referenced by items within a Flow.
• Copy: Copies the component and its children to your clipboard. You can then paste the components into the current Layout or another Layout.
• Paste: Inserts any copied component into the current position within the Layout.
• Duplicate: Creates an exact copy of the component and its children, placing it immediately after the original component. This is an efficient way to repeat elements like list items or card blocks.
• Create Component: Converts the selected component and its children into a Reusable Component. The main component can then be edited in the Components tab found in the Top Bar.
• Delete: Removes the component and its children from the Layout.
• • Tip: You can also use the keyboard shortcut Control + Backspace (Windows) or Command + Delete (Mac) to delete the selected component.
• Detach Instance: When working with an instance of a Reusable Component, this option removes the connection to the main component while preserving all current settings and styles.