---
title: Custom Components
description: How to create custom components for Markdown.
date: 14-12-2024
---

To add custom components in DocuBook, follow these steps:

1. **Create Your Component**: First, create your custom component in the `@components/markdown` folder. For example, you might create a file named `Outlet.tsx`.

2. **Import Your Component**: Next, open the `@lib/markdown.ts` file. This is where you'll register your custom component for use in Markdown.

3. **Add Your Component to the Components Object**: In the `@lib/markdown.ts` file, import your custom component and add it to the `components` object. Here’s how to do it:

```ts
import Outlet from "@/components/markdown/outlet";

// Add custom components
const components = {
  Outlet,
};
```

4. **Using Your Custom Component in Markdown**: After registering your component, you can now use it anywhere in your Markdown content. For instance, if your `Outlet` component is designed to display additional information, you can use it as follows:

### Markdown Example

```markdown
<Outlet>
  This is some custom content rendered by the Outlet component!
</Outlet>
```

### Rendered Output

This will render the content inside the `Outlet` component, allowing you to create reusable and dynamic Markdown content.

By following these steps, you can extend the capabilities of your Markdown documentation and create a more engaging user experience.