Svelte Props Explained — Component Input Data

In this tutorial, you will learn about Svelte Props Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Svelte components receive data from parents through props, declared with the export let syntax that makes a variable a component property.

What You'll Learn

• Exporting let variables as props
• Default prop values
• Prop forwarding to child components
• Spread props with $props()
• TypeScript prop types

Why It Matters

Props are the foundation of component communication in Svelte. The export let syntax is more explicit than other frameworks, making prop requirements clear at a glance.

<!-- UserCard.svelte -->
<script>
  let { name, email, role = "user", onSelect } = $props();
</script>

<div class="card" onclick={() => onSelect?.(name)}>
  <h3>{name}</h3>
  <p>{email}</p>
  <span class="badge">{role}</span>
</div>

<style>
  .card { border: 1px solid #ddd; padding: 1rem; border-radius: 8px; }
  .badge { background: #ff3e00; color: white; padding: 2px 8px; border-radius: 4px; }
</style>

<!-- App.svelte -->
<script>
  import UserCard from "./UserCard.svelte";
  const user = { name: "Alice", email: "alice@example.com", role: "admin" };
  function handleSelect(name) { alert(`Selected: ${name}`); }
</script>

<UserCard {...user} onSelect={handleSelect} />

Expected output: A styled card renders user data with spread props. The badge shows "admin". Clicking triggers the select handler.