> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/withastro/astro/llms.txt
> Use this file to discover all available pages before exploring further.
# Layouts
> Learn how to create and use layout components to share common page structures in Astro
Layouts are special Astro components used to provide a reusable structure for your pages. They typically include common elements like headers, footers, navigation, and meta tags.
## What are Layouts?
A layout is just an Astro component that wraps page content using the `` element. There's nothing special about a layout file—it's a regular `.astro` component.
```astro title="src/layouts/BaseLayout.astro" theme={null}
---
const { title } = Astro.props;
---
{title}
```
## Using a Layout
Import and use layouts like any other component:
```astro title="src/pages/index.astro" theme={null}
---
import BaseLayout from '../layouts/BaseLayout.astro';
---
Welcome to my site!
This content appears in the slot.
```
The content between the opening and closing `` tags is passed to the `` in the layout.
## Props to Layouts
Pass data to layouts via props:
```astro title="src/layouts/BlogLayout.astro" theme={null}
---
interface Props {
title: string;
description: string;
author: string;
pubDate: Date;
}
const { title, description, author, pubDate } = Astro.props;
const formattedDate = pubDate.toLocaleDateString();
---
{title}
{title}
By {author} on {formattedDate}
```
Use it:
```astro title="src/pages/blog/my-post.astro" theme={null}
---
import BlogLayout from '../../layouts/BlogLayout.astro';
---
This is the blog post content.
It can contain multiple paragraphs.
```
## Nesting Layouts
Layouts can import and use other layouts, creating a hierarchy:
```astro title="src/layouts/BaseLayout.astro" theme={null}
---
const { title } = Astro.props;
---
{title}
```
```astro title="src/layouts/BlogLayout.astro" theme={null}
---
import BaseLayout from './BaseLayout.astro';
interface Props {
title: string;
author: string;
}
const { title, author } = Astro.props;
---
{title}
By {author}
```
Now your blog posts automatically get both the blog-specific structure AND the base HTML structure:
```astro title="src/pages/blog/post.astro" theme={null}
---
import BlogLayout from '../../layouts/BlogLayout.astro';
---
Post content here.
```
```html theme={null}
My Post
My Post
By Alice
Post content here.
```
## Layout with Multiple Slots
Use named slots for more complex layouts:
```astro title="src/layouts/DocumentLayout.astro" theme={null}
---
const { title } = Astro.props;
---
{title}
```
Use named slots:
```astro title="src/pages/docs.astro" theme={null}
---
import DocumentLayout from '../layouts/DocumentLayout.astro';
---
```
## Markdown Layouts
Markdown and MDX files can specify a layout in their frontmatter:
```markdown title="src/pages/blog/post.md" theme={null}
---
layout: ../../layouts/BlogLayout.astro
title: My Blog Post
author: Alice
---
# My Blog Post
This is the markdown content.
```
The layout receives frontmatter data as props:
```astro title="src/layouts/BlogLayout.astro" theme={null}
---
const { frontmatter } = Astro.props;
const { title, author } = frontmatter;
---
{title}
{title}
By {author}
```
The `` contains the rendered markdown content.
## Real-World Example
Here's a production-ready layout from the Astro source code examples:
```astro title="src/layouts/BaseLayout.astro" theme={null}
---
interface Props {
title: string;
description?: string;
image?: string;
}
const {
title,
description = 'Default site description',
image = '/default-og-image.jpg'
} = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---
{title}
```
## Layout Patterns
```astro theme={null}
---
// Minimal HTML structure
const { title } = Astro.props;
---
{title}
```
```astro theme={null}
---
// Adds nav and footer
import BaseLayout from './BaseLayout.astro';
---
```
```astro theme={null}
---
// Adds article structure
import AppLayout from './AppLayout.astro';
const { frontmatter } = Astro.props;
---
{frontmatter.title}
```
## Dynamic Layouts
Conditionally render different layouts:
```astro title="src/layouts/ConditionalLayout.astro" theme={null}
---
import LightLayout from './LightLayout.astro';
import DarkLayout from './DarkLayout.astro';
const { theme = 'light', title } = Astro.props;
const Layout = theme === 'dark' ? DarkLayout : LightLayout;
---
```
## Best Practices
Create a minimal base layout with essential HTML structure.
Build specialized layouts that extend the base for different page types.
Type your layout props for better developer experience.
Each layout should serve a specific purpose (blog, docs, landing page).
Named slots provide flexibility, but don't overuse them.
Nest layouts instead of duplicating code.
Provide sensible defaults for optional props.
Include SEO tags in your base layout.
Keep similar pages using the same layout.
## Learn More
Learn about Astro component basics
Type-safe content with automatic layouts