Svelte Component Props
Props allow you to pass data from a parent component to a child component. This page demonstrates different ways to work with props in Svelte.
Basic Props Example
Hello Svelte!
This is a simple card component with props
Example usage:
<Card
title="Hello Svelte!"
description="This is a simple card component with props"
type="info"
/>Passing Multiple Props
Basic Props
Simple passing of string, number and boolean props
Spread Props
Using the spread operator to pass multiple props at once
Default Props
Components can define default values for props
Using #each with props:
{#each cards as card}
<Card
title={card.title}
description={card.description}
type={card.type}
/>
{/each}Spread Props
Spread Props
Using the spread operator to pass multiple props at once
Using the spread operator:
<Card {...card} />This passes all properties of the object as individual props.
Default Props
Default Props Example
No description provided
Component with default props:
<script>
export let title;
export let description = "Default description";
export let type = "default";
</script>Reactive Props
Count: 0
Reactive Props
This prop updates when parent state changes. Count: 0