You might be familiar with the concept of props from a modern JavaScript framework like React, or Vue or Svelte.

Props are the way we can pass information to components. This includes variables, but also functions.

Astro components also support props.

Here’s how to use them.

Suppose you define a Hello component in src/components/Hello.astro:

<p>Hello!</p>

You can pass a name prop to the component when you use it, like this: <Hello name="Flavio" />, and you can display the name in your component output by using this syntax:

<p>Hello {Astro.props.name}!</p>

It’s common to extract the props to individual variables with object destructuring in the component’s frontmatter section, which is nice when you have complex components:

---
const { name } = Astro.props
---
<p>Hello {name}!</p>

Here’s how to work with multiple props, to support for example this usage: <Hello name="Flavio" message="Welcome" />

---
const { name, message } = Astro.props
---
<p>{message} {name}!</p>

And in this way you can support defaults for props that might be unset:

---
const { name = '', message = 'Hello' } = Astro.props
---
<p>{message} {name}!</p>

Lessons in this unit:

0:	Introduction
1:	Your first Astro site
2:	The structure of an Astro site
3:	Astro components
4:	Adding more pages
5:	Building composable layouts
6:	▶︎ Astro Props
7:	CSS in Astro
8:	JavaScript in Astro
9:	Access configuration values in components
10:	Astro, when to use .astro or .ts files