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

# Reusable snippets

> Create shared content components to keep your pages in sync

One of the core principles of software development is DRY (Don't Repeat
Yourself). This applies to documentation too. If you find yourself repeating
the same content across multiple pages, create a reusable snippet to keep
everything in sync.

## Creating a snippet

**Pre-condition**: Snippet files must live in the `snippets` directory.

<Note>
  Files in the `snippets` directory are treated as components, not standalone pages. To render a snippet as a page, import it into an MDX file outside of `snippets`.
</Note>

### Default export

1. Create a snippet with the content you want to reuse. You can accept props as variables.

```mdx snippets/my-snippet.mdx theme={null}
Hello world! This is reusable content. The keyword is {word}.
```

<Warning>
  Snippet files must be inside the `snippets` directory for imports to resolve.
</Warning>

2. Import and use the snippet in any page:

```mdx destination-file.mdx theme={null}
---
title: My page
description: Example page
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## Section

<MySnippet word="bananas" />
```

### Reusable variables

1. Export variables from a snippet:

```mdx snippets/variables.mdx theme={null}
export const appName = 'ecge';
export const config = { maxRetries: 3 };
```

2. Import and use them:

```mdx destination-file.mdx theme={null}
import { appName, config } from '/snippets/variables.mdx';

Welcome to {appName}. Max retries: {config.maxRetries}.
```

### Reusable components

1. Export a component as an arrow function:

```mdx snippets/custom-component.mdx theme={null}
export const Alert = ({ title }) => (
  <div>
    <h3>{title}</h3>
    <p>This is a reusable alert component.</p>
  </div>
);
```

<Warning>
  MDX does not compile inside arrow function bodies. Use HTML syntax within exported components.
</Warning>

2. Import and use it:

```mdx destination-file.mdx theme={null}
import { Alert } from '/snippets/custom-component.mdx';

<Alert title="Heads up" />
```