Component Snippets in Svelte

From the Svelte cheat sheet · Snippets (Svelte 5) · verified Jul 2026

Component Snippets

Passing snippets between components

javascript

<!-- Card.svelte -->
<script>
  let { header, children, footer } = $props();
</script>

<div class="card">
  {@render header?.()}
  {@render children()}
  {@render footer?.()}
</div>

<!-- Usage -->
<Card>
  {#snippet header()}
    <h2>Title</h2>
  {/snippet}
  
  {#snippet children()}
    <p>Content</p>
  {/snippet}
</Card>

📤 Pass snippets as props to components

🎰 Named snippet props for organization

🔄 Children is the default snippet

📦 Replaces slot and slot prop patterns

More Svelte tasks

Basic Snippets

Back to the full Svelte cheat sheet