Component Props with $props

A component that only ever shows the same thing isn't very reusable. Props let a parent pass data into a child, and in Svelte 5 they arrive through a single rune: $props.

<!-- Greeting.svelte -->
<script>
  let { name } = $props();
</script>

<h2>Hello, {name}!</h2>

<!-- App.svelte -->
<script>
  import Greeting from './Greeting.svelte';
</script>

<Greeting name="Ana" />

$props() returns an object of everything the parent passed as attributes, and you destructure it just like any JavaScript object. There's no separate "props" concept to learn syntactically — it's ordinary destructuring, which means every JavaScript trick for destructuring (renaming, defaults, rest) works here too.

Default values

<script>
  let { name, greeting = 'Hello' } = $props();
</script>

<h2>{greeting}, {name}!</h2>

<Greeting name="Bilal" />
<Greeting name="Chen" greeting="Welcome" />

If a caller doesn't pass greeting, the default kicks in — same rule as a default parameter on a regular function.

Renaming and rest props

<script>
  let { class: className, ...rest } = $props();
</script>

<button class={className} {...rest}>
  <slot />
</button>

class is a reserved word in JavaScript, so class: className renames it during destructuring. The rest pattern (...rest) gathers up everything else the caller passed — useful for a wrapper component that forwards unrecognized attributes (like disabled or aria-label) straight to the underlying DOM element without listing every possible one by hand.

Props are read-only, by design

<script>
  let { count } = $props();
  // count = count + 1; // don't do this
</script>

Reassigning a prop directly is a mistake Svelte will warn you about: the parent owns that value, and silently mutating your own copy would make the two get out of sync with no clear owner. If a child needs to change something the parent owns, the correct pattern is a callback prop — the parent passes a function, and the child calls it to request a change. You'll see that pattern in the component communication lesson later in this course.

Props stay reactive

Because $props() returns live, tracked values, using a prop inside a $derived or in your markup keeps working exactly like $state — if the parent's value changes, everything in the child that reads that prop updates automatically, with no extra wiring needed on your end.