---
title: Fragments
---

# Fragments

A fragment groups children without adding a wrapper element: `Fragment`
returns its children unchanged.

## Syntax

Two forms are available:

```tsx
import { Fragment } from "@vincle/core";

// Long form
const items = (
  <Fragment>
    <li>One</li>
    <li>Two</li>
  </Fragment>
);

// Shorthand (requires jsxImportSource in tsconfig)
const items2 = (
  <>
    <li>One</li>
    <li>Two</li>
  </>
);
```

`<>...</>` and `<Fragment>` are the same thing; the long form is there if you
prefer it.

## When to use fragments

When a component returns several elements and a wrapping `<div>` would be
noise:

```tsx
function Breadcrumbs() {
  return (
    <>
      <a href="/">Home</a>
      <span>/</span>
      <a href="/docs">Docs</a>
      <span>/</span>
      <span>Components</span>
    </>
  );
}
```

## Where to next

- [Components](/guide/jsx/components): functions that return JSX
- [Elements & attributes](/guide/jsx/elements-attributes): how JSX maps to HTML
- [First render](/guide/getting-started/first-render): your first component