The Components Panel is your central source for all pre-built elements used to construct your application's user interface. It is located in the Left Sidebar of the Layouts Editor. Every piece of UI, from basic text and images to complex interactive elements, starts here.

Component Types

Components are organized into categories, helping you manage what elements are available to you within your project.

Basic: The foundational set of standard, built-in components (often referred to as the "Launchpad" library) available in every Shipcode project. This includes essential elements like View, Text, and Image.

See detailed documentation on Launchpad Component Library components.

Components: Reusable Components you have created locally within your current project. These allow you to define a block of UI once and reuse it across multiple Layouts.

Reusable components are created by you, seen above, a “Components” tab with reusable components saved, and a “Components” tab that is empty.  

See detailed documentation on Reusable Components.

Libraries: Components provided by third-party Integrations or custom Shipcode libraries that you have explicitly enabled in your Project Settings.

See detailed documentation on Shopify Component Library components.

Adding Components to Layouts

There are two primary ways to efficiently locate and add components to your Layouts:

• Search & Filter: Use the Search field within the Components Panel to quickly filter the component list by name.
• Drag and Drop: Click and drag a component from the list directly onto your Layout on the Canvas. A blue line visually indicates the position in the structure where the component will be inserted.
• Command Palette: Use the shortcut CMD/CTRL + Shift + P to open the Command Palette, which allows for quick, keyboard-driven searching and adding of components to the Canvas.

Understanding Component Structure

Understanding a component's structural role is crucial for building effective layouts. Components fall into two fundamental structural types, which dictates how you can nest and organize your UI.

Seen here, container components and self-contained components create an experience, in this case, a hero tile on a homepage.

Container Components (Wrappers)

These components are designed to hold and organize other components, establishing the parent-child hierarchy that defines your UI structure. Using these components is the fundamental way to apply layout rules and data context to an entire section of your design.

Examples of Container Components:

• View: The most basic and versatile container, used for grouping elements and applying Flexbox layout rules.
• Data Zone: A specialized container that provides a specific data context (from an API, form, or route) to all nested components.
• List / Grid / Carousel: Components designed to efficiently render and repeat the UI of their children based on a collection of data.
• Link: A wrapper that makes all of its child elements clickable, triggering a navigation action.
• Accordion: Creates expandable/collapsible sections of content, separating children into Header and Content layers.
• Background Image: Used to display a background image while allowing other components to be layered on top of it.
• Scroll View: A container that allows its contents to scroll independently within a fixed size.
• Selection Group: A form component wrapper designed to organize and manage multiple selectable options (children).

Self-Contained Components

These are single-purpose elements that display content or capture input directly. They serve as the functional or presentational leaf nodes in your UI hierarchy and do not accept other components as children.

Examples of Self-Contained Components:

• Text: Used to display any kind of static or dynamic text content (headings, paragraphs, labels).
• Image: Used to display a single image asset.
• Text Input / Toggle: Form elements designed specifically to capture and manage user input.
• HTML View: Used to display raw HTML content within a container.
• Progress Bar: Provides visual feedback to users about the progress of a process.
• Rating: Displays a visual rating (e.g., stars) based on a numerical value.
• Video: Used to embed and play video content in your project.
• Web Content: (Native-only) Used to embed an entire webpage or website into a native application.