Adding a Component
This is a member-only chapter. Log in with your Signal Over Noise membership email to continue.
Log in to readModule 2 · Section 5 of 8
Adding a Component
Components in Astro work the same way as layouts — they’re .astro files with props. The difference is convention, not mechanism. Create src/components/Header.astro:
---
const { siteName } = Astro.props;
---
<header>
<a href="/">{siteName}</a>
<nav>
<a href="/about">About</a>
</nav>
</header>Import and use it in your layout:
---
import Header from '../components/Header.astro';
---
...
<body>
<Header siteName="My Site" />
<slot />
</body>