Fragments

Astro’s <Fragment> is the “no wrapping element” group. Two main uses.

Filling a Named Slot With Multiple Elements

<Card>
  <Fragment slot="header">
    <h2>Title</h2>
    <p class="subtitle">Subtitle</p>
  </Fragment>
  <p>Body</p>
</Card>

Without the Fragment, you’d need a wrapping <div> to put two elements into the same slot — and that wrapper would show up in the output.

Inside .map() When Each Item Is Multiple Elements

{entries.map(e => (
  <Fragment>
    <dt>{e.term}</dt>
    <dd>{e.def}</dd>
  </Fragment>
))}

Each <dt> / <dd> pair goes directly under the <dl> — no intermediate wrapper.

You Don’t Always Need It

Unlike JSX, Astro’s template allows multiple top-level elements without a Fragment:

---
---
<h1>Title</h1>
<p>Body</p>

The Fragment is only needed inside slot="..." or inside an expression that has to evaluate to a single thing.

Shorthand

Astro accepts <>...</> as shorthand, same as JSX:

{cond && (
  <>
    <h2>Header</h2>
    <p>Para</p>
  </>
)}

Up Next

How to render raw HTML safely with set:html.