> For the complete documentation index, see [llms.txt](https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/getting-started-with-sveltekit/base-syntax-and-core-features-of-svelte/components-and-communication-via-props.md).

# Components & Communication via Props

## Setting up props

In Svelte, you can give component props (properties), these are attributes that can be used to communicate between a parent and child properties.

{% code title="Child.svelte" %}

```html
<script>
    const {
    name = "",
    age = null,
    } = $props();
</script>

<h2>This is a child Component</h2>
<p>My name is {name} and I'm {age}</p>
```

{% endcode %}

{% code title="Parent.svelte" %}

```html
<script>
    import Child from '$lib/Child.svelte';
    let name = "Shento";
    let age = 16;
</script>
<Child name={name} age={age} />
```

{% endcode %}

{% hint style="info" %}
If the prop and value are the same like this:

`<Child value={value} />`

You can use a shorthand of `<Child {value} />`
{% endhint %}

## Children prop

In Svelte 5, the concept of "children props" is a way to pass content or elements from a parent component to a child component. This feature is particularly useful when you want to create components that can be more dynamic and reusable by allowing them to render different content depending on what the parent provides.

{% tabs %}
{% tab title="Parent.svelte" %}

```html
<script>
  import MyButton from "./MyButton.svelte";
</script>

<FunnyButton>Click me!</FunnyButton>
```

{% endtab %}

{% tab title="MyButton.svelte" %}

```html
<script>
  let { children } = $props();
</script>

<button>
  {@render children()} <!-- Click me! will appear here ->
</button>
```

{% endtab %}
{% endtabs %}