Components

Components are `.astro` files (typically in `src/components/`) you import into pages or other components and use as JSX-like tags.

3 min read Level 1/5 #astro#components

What you'll learn

Author a component
Import and use it
Tell a component from a page

A component is just an .astro file that lives anywhere except src/pages/. You import it from another .astro file and use it as a tag.

A Tiny Component

---
// src/components/Header.astro
---
<header>
  <a href="/">Home</a>
  <a href="/about">About</a>
</header>

Importing It

---
// src/pages/index.astro
import Header from "../components/Header.astro";
---

<Header />

<main>
  <h1>Welcome</h1>
</main>

The import path is whatever points at the file. Astro tags are always PascalCase — <Header />, not <header /> (that would be the HTML element).

Page vs Component

The only thing that makes a file a page is its location in src/pages/. Move it elsewhere and it’s just a component.

Pages get URLs. Components are reusable pieces you import.

One Component Per File

Convention. Astro doesn’t enforce it, but a one-to-one mapping between file and exported tag is by far the cleanest.

Components Can Use Components

---
// src/components/Card.astro
import Avatar from "./Avatar.astro";
---

<article>
  <Avatar />
  <slot />
</article>

Standard composition — same as React/Vue/Svelte.

Astro Components and Framework Components

You can also use a React/Vue/Svelte component as if it were an Astro component (covered in chapter 5). They render to HTML by default; you opt into client-side JavaScript with a client:* directive.

Up Next

Props — how a parent passes data into a component.

Component Props →