# Docs
URL: /docs/apps/docs

Docs powered-by Fumadocs. Manage content with MDX.

[ship.pluv.io](https://ship.pluv.io) comes with a prebuilt docs powered by [Fumadocs](https://fumadocs.com/). Providing docs for your app can be a great way to help your users get started with your app.

<FeatureExclusiveFor repos={["cloudflare-monorepo", "vercel-monorepo"]} />

## Writing content

The content for the docs are powered by [Content Collections](https://content-collections.dev/) and [MDX](https://mdxjs.com/). To write or edit content, you will need to update the content in the `/content/docs` directory. This directory uses file-based routing to determine the URL of the page:

* `index.mdx` files will map to a `/` URL path
  * e.g. if you have `/content/docs/my-docs/index.mdx`, the URL will be `/docs/my-docs`
* `[name].mdx` files will map to a `/[name]` URL path
  * e.g. if you have `/content/docs/my-docs/my-page.mdx`, the URL will be `/docs/my-docs/my-page`
* Folders will create a sidebar group. So if you have `/content/docs/my-docs/my-page/index.mdx`, the URL will be `/docs/my-docs/my-page` and the page will be grouped under the "My Docs" sidebar group (assuming that "My Docs" is the title you gave the group).

For any page, you can provide a `title` and `description` in the frontmatter. These will be used to display the title and description of the page in the sidebar and on the page itself.

You can also provide a `meta.json` file in the same directory to explicitly specify the order of the pages in the sidebar.

```json title="meta.json"
{
    "pages": ["my-page", "my-other-page"]
}
```

To view the full fumadocs documentation on routing, see [their routing documentation](https://fumadocs.dev/docs/ui/page-conventions).

### Adding custom components

[MDX](https://mdxjs.com/) allows you to use custom React components in your content. To add your own custom components, simply append your component to the `useMDXComponents` function in `/src/mdx-components.tsx`.

```tsx title="src/mdx-components.tsx"
import { MyComponent } from "@/components/my-component";
import type { MDXComponents } from "mdx/types";

export const useMDXComponents = (components: MDXComponents = {}): MDXComponents => ({
    ...components,
    MyComponent,
});
```

Then you can use your component in your content by importing it like so:

```mdx title="content/docs/my-docs/my-page.mdx"
## My custom title

Below is my custom component.

<MyComponent />
```

See that you do not need to import the component within your page's content.