Skip to content

Props

In React you receive props as a function argument and destructure them in the parameter list. In Svelte 5 you call the $props() rune and destructure the result — the shape is nearly identical, so the mental mapping is immediate.

React props vs `$props()`

// Badge.jsx
function Badge({ label, count = 0, color = 'blue' }) {
  return (
    <span style={{ color }}>
      {label}: {count}
    </span>
  );
}
export default Badge;

<!-- Badge.svelte -->
<script>
  let { label, count = 0, color = 'blue' } = $props();
</script>

<span style="color: {color}">
  {label}: {count}
</span>

The destructuring syntax is identical. Default values work the same way. The only difference is the source: React uses the function argument; Svelte uses $props().

Rest props

If you want to forward unknown attributes to a DOM element (e.g., for a wrapper component), spread the rest:

function Button({ children, ...rest }) {
  return <button {...rest}>{children}</button>;
}

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

<button {...rest}>
  {@render children?.()}
</button>

Try it: runnable props demo

SvelteOpen in Svelte Playground ↗ (copies code)

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

<p style="color: {color}; font-size: 1.4rem;">
  {greeting}, {name}!
</p>

<style>
  p { font-weight: bold; }
</style>

Edit the default values in the $props() destructure to see the output change immediately.