Installation · Ariadocs

Install

Install the packages you need. You can add the others later.

pnpm add @ariadocs/mdx @ariadocs/openapi @ariadocs/components

Set up MDX

Create one docs object and import it wherever you render a page. The plugins add heading links, code titles and syntax highlighting.

lib/docs.ts

import { createDocs } from "@ariadocs/mdx";
import {
  remarkGfm,
  rehypeSlug,
  rehypeAutolinkHeadings,
  rehypeCodeTitles,
  rehypePrism,
  rehypeCodeRaw,
} from "@ariadocs/mdx/plugins";

export const docs = createDocs({
  contentDir: "content/docs",
  remarkPlugins: [remarkGfm],
  rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings, rehypeCodeTitles, rehypePrism, rehypeCodeRaw],
});

Then add a page:

content/docs/index.mdx

---
title: Welcome
---

This is your first page.

Set up OpenAPI

Point createOpenAPI at your spec. It accepts a file path, a URL or the spec object.

lib/openapi.ts

import { createOpenAPI } from "@ariadocs/openapi";

export const openapi = createOpenAPI({ source: "./openapi.yaml" });

Set up styles

The components use Tailwind CSS v4 classes, so Tailwind has to scan the package. Add these lines to your main CSS file:

app/globals.css

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@source "../node_modules/@ariadocs/components/dist";

Then import the component styles once, in your root layout:

import "@ariadocs/components/styles.css";

If you use shadcn/ui, the components pick up your colors automatically.

Pick your framework: Next.js App Router, Next.js Pages Router, React Router or TanStack Start.