# Layout

Layout components are the foundational building blocks for structuring your blocklet application's user interface. They provide a consistent and predictable framework, including the main header, footer, and content areas. By leveraging these components, you can ensure a professional and cohesive user experience across your entire application, as they automatically adapt based on your blocklet's metadata.

These components form the primary visual structure of an application, as illustrated below:

<!-- DIAGRAM_IMAGE_START:architecture:4:3:1765962229 -->
![Layout](assets/diagram/layout-diagram-0.jpg)
<!-- DIAGRAM_IMAGE_END -->

This section provides an overview of the primary layout components available. For detailed implementation guides and API references, please refer to the specific documentation for each component.

<x-cards data-columns="3">
  <x-card data-title="Header" data-icon="lucide:navigation" data-href="/components/layout/header">
    Provides a responsive and customizable header, automatically populated with navigation links and user session controls from the blocklet's metadata.
  </x-card>
  <x-card data-title="Footer" data-icon="lucide:book-down" data-href="/components/layout/footer">
    Renders a consistent footer for your application, including branding, copyright information, social media links, and additional navigation.
  </x-card>
  <x-card data-title="Dashboard" data-icon="lucide:layout-dashboard" data-href="/components/layout/dashboard">
    A pre-built dashboard layout with a sidebar, header, and content area, designed for admin interfaces and user-centric views.
  </x-card>
</x-cards>

## Summary

The layout components are designed to work together seamlessly, pulling configuration directly from your blocklet's metadata (`blocklet.yml`) to minimize boilerplate code and accelerate development.

To continue, please explore the detailed documentation for each component to understand their specific props, usage patterns, and customization options.

- **Next**: Learn about the [Header component](./components-layout-header.md).