> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nemu.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Build reusable content from plain functions that return blocks

A reusable component is just a function that returns a `Block` or an array of `Block`s.
Because `page.content` flattens arrays, a component that returns `Block[]` can be spread
inline alongside other blocks.

## A callout component

This component returns a single note block.

```ts theme={null}
const callout = (title: string, body: InlineContent): Block =>
  ({ type: "note", variant: "info", title, text: body });
```

## A section component

This component returns an array of blocks, a heading followed by a paragraph.

```ts theme={null}
const section = (title: string, body: InlineContent): Block[] => [
  { type: "heading", text: title, level: 2 },
  { type: "paragraph", text: body },
];
```

## Using them in a page

Spread the array returning component, and pass the single block component directly.

```ts theme={null}
doc.page().content(
  ...section("Overview", "What this document covers."),
  callout("Heads up", "This value is provisional."),
);
```

<Note>
  Spreading works because `content` flattens arrays. A `Block[]` component composes the same as
  a single `Block`.
</Note>

<Tip>
  The repository includes a full reference at `examples/simplified` that puts these patterns
  together in one document.
</Tip>