If Routes provide the unique address for every screen in your application, Components and Layouts provide the physical structure and visual content of those screens. This architectural approach, based on reusability, is the foundation for building fast, consistent, and scalable experiences in Shipcode.

The Component: The Atomic Building Block

A Component is the fundamental, atomic element of the user interface. Think of a component as a digital Lego brick.

A single component, like a Text element, an Image, or a Button, is simple on its own. However, components can be stacked, grouped, and customized to create every visual element in your application.

The Power of Reusability

Component-based architecture ensures that you never have to design the same element twice. Once you build a complex group of components—like a product card or a navigation bar—you can save it as a Reusable Component to your library.

• Consistency: Every instance of the reusable component will share the same structure and design, ensuring visual consistency across your entire application.
• Scalability: If you need to change the color of the primary button used across 50 screens, you only edit the original Reusable Component once. Every instance of that component on every screen is updated instantly.

Component Structure: Structure and Style

Conceptually, every Component you place serves two distinct, technical functions:

• Structure (HTML): The component defines the content and hierarchy—what the element is (a heading, a paragraph, a list) and where it belongs in the document structure.
• Style (CSS): The component is then styled to control its appearance and position—its color, font, size, and alignment.

The Layout: The Screen Container

If the Component is the brick, the Layout is the complete wall or house built from those bricks.

A Layout is the highest-level container in Shipcode, representing a single, complete screen (or sometimes a major section of a screen). The primary purpose of a Layout is to define the full visual canvas and house the various components and reusable components you have created.

Every Layout is defined by a Route. When a user navigates to a specific Route (e.g., /checkout), the application loads the associated Layout to display the correct screen.

Component Editor vs. Layout Editor

Shipcode provides two different environments to manage components, reflecting the difference between creating the master template and building the final screen:

• Component Editor (Master Template): This is where you work on the Reusable Component itself. Changes made here affect every instance of that component across the entire project. This is where you define its core functionality and visual properties.
• Layout Editor (Instance): When you drop a component onto a Layout, you are creating an instance. You can change the content (e.g., changing "Add to Cart" to "Buy Now") and even override some style properties (like a background color) without affecting the original Reusable Component.

This distinction allows you to maintain the integrity of your core design system while still providing the flexibility needed to build specific, unique screens.