Components (.astro)

An .astro file combines HTML, components, and frontmatter-like script.

Example:

---
const { title } = Astro.props;
---
<section>
  <h2>{title}</h2>
  <slot />
</section>

Using framework islands:

---
import Counter from "../components/Counter.jsx";
---
<Counter client:load />        <!-- hydrate on page load -->
<Counter client:visible />     <!-- hydrate when visible -->
<Counter client:idle />        <!-- hydrate when idle -->