Slots in Astro
From the Astro cheat sheet · Components & Syntax · verified Jul 2026
Slots
astro
---
// Layout.astro
---
<div class="layout">
<header>
<slot name="header" />
</header>
<main>
<slot /> <!-- default slot -->
</main>
<footer>
<slot name="footer">
<p>Default footer content</p>
</slot>
</footer>
</div>✅ <slot /> renders child content passed to component
💡 Named slots allow multiple content areas
🔍 Fallback content appears if slot is empty
⚡ Use Astro.slots API to check if slot has content
slotscompositionlayouts
Continue with Astro
Save the full cheat sheet or work through every related task.