> ## Documentation Index
> Fetch the complete documentation index at: https://puzzlet-9ba7bb98.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Create reusable template fragments in TemplateDX for shared prompt logic and structure.

Components in TemplateDX look like JSX but behave differently at runtime: they're **inlined at bundle time**, not invoked as a render function. When you `import Blog from './blog.mdx'` and use `<Blog>`, TemplateDX's bundler substitutes the imported file's AST directly into the parent at parse time. There is no React render cycle, no hooks, no event handlers, just template composition.

## Constraints

* **TemplateDX accepts only default imports.** `import { Thing } from './file.mdx'` throws at bundle time; the bundler explicitly rejects named imports per `bundler.ts:209`.
* **The bundler parses imports as MDX regardless of extension.** It inlines any file the content loader can read; use `.mdx` or `.md` by convention.
* **Use `{props.*}` for data, `{props.children}` for body content.** The bundler populates both from the parent's JSX attributes and child nodes.
* **No React runtime.** Hooks, event handlers, and refs do nothing inside a TemplateDX component. If you find yourself reaching for them, you probably want a custom [tag plugin](/templatedx/tags) instead.

## Example

Given `blog.mdx`:

```mdx blog.mdx theme={null}
# {props.title}

{props.children}
```

And the parent template:

```mdx index.mdx theme={null}
import Blog from './blog.mdx';

# Example

<Blog title="Turtles">
  Turtles are really cool...
</Blog>
```

TemplateDX renders:

```markdown theme={null}
# Example

# Turtles

Turtles are really cool...
```

TemplateDX replaces the `<Blog>` tag with the contents of `blog.mdx`, resolving `props.title` to `"Turtles"` and `props.children` to the child body.

## When to use a component vs. a tag

* **Components**: for static template fragments you want to compose. Think partials: a shared `<SystemPrompt>` header, a reusable `<FewShotExamples>` block.
* **[Tags](/templatedx/tags)**: for logic that needs runtime behavior such as conditional rendering (`<If>`), iteration (`<ForEach>`), raw passthrough (`<Raw>`), or custom extensions you implement as a `TagPlugin`.