mintlify__docs/create/reusable-snippets.mdx

---
title: "Reusable snippets"
description: "Create reusable snippets to maintain consistency across pages."
keywords: ["content snippets", "reusable content", "variables", "snippets configuration"]
---

One of the core principles of software development is DRY (Don't Repeat
Yourself), which applies to documentation as
well. If you find yourself repeating the same content in multiple places, you
should create a custom snippet to keep your content in sync.

## Snippet locations

By default, snippet files live in the `/snippets/` directory. You can also configure additional directories to store snippets using the `snippets` property in your `docs.json`.

Any file in a snippet directory will be treated as a snippet and will not be rendered into a standalone page. If you want to create a standalone page from the snippet, import the snippet into another file and call it as a component.

<Tip>
  Snippets support both absolute imports (starting with `/snippets/` or your custom path) and
  relative imports (starting with `./` or `../`).
</Tip>

### Custom snippet directories

To organize snippets in custom locations, add the `snippets` property to your `docs.json` with an array of glob patterns. Patterns use [minimatch](https://github.com/isaacs/minimatch) syntax:

```json docs.json
{
  "snippets": ["components/**", "shared/reusable/**"]
}
```

This configuration allows you to import snippets from the specified directories in addition to the default `/snippets/` folder:

```typescript destination-file.mdx
import Alert from '../components/Alert.mdx';
import Banner from '../shared/reusable/Banner.mdx';
import DefaultSnippet from '../snippets/my-snippet.mdx';
```

## Creating a custom snippet

**Pre-condition**: Your snippet file must be in the `/snippets/` directory or a [custom snippet directory](#custom-snippet-directories) you've configured.

### Default export

1. Add content to your snippet file that you want to re-use.

```typescript snippets/my-snippet.mdx
Hello world! This is my content I want to reuse across pages.
```

2. Import the snippet into your destination file.

```typescript destination-file.mdx
---
title: My title
description: My Description
---

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

## Header

Lorem impsum dolor sit amet.

<MySnippet/>

```

### Exporting with variables

1. Optionally, you can add variables that can be filled in via props when you import the snippet. In this example, our variable is word.

```typescript snippets/my-snippet.mdx
My keyword of the day is {word}.
```

2. Import the snippet into your destination file with the variable. The property will fill in based on your specification.

```typescript destination-file.mdx
---
title: My title
description: My Description
---

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

## Header

Lorem impsum dolor sit amet.

<MySnippet word="bananas" />

```

### Reusable variables

1. Export a variable from your snippet file:

```typescript snippets/path/to/custom-variables.mdx
export const myName = "my name";

export const myObject = { fruit: "strawberries" };
```

2. Import the snippet from your destination file and use the variable:

```typescript destination-file.mdx
---
title: My title
description: My Description
---

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

Hello, my name is {myName} and I like {myObject.fruit}.
```

### JSX snippets

1. Export a JSX component from your snippet file. (See [React components](/customize/react-components) for more information):

```js icon=square-js snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};
```

<Note>
  Important: When creating JSX snippets, use arrow function syntax (`=>`) rather
  than function declarations. The `function` keyword is not supported in this
  context.
</Note>

2. Import the snippet from your destination file and use the component:

```typescript destination-file.mdx
---
title: My title
description: My Description
---

import { MyJSXSnippet } from '/snippets/my-jsx-snippet.jsx';

<MyJSXSnippet />
```