Ariadocs

Components

Edit on GitHub

Components for docs pages and API references.

pnpm add @ariadocs/components

There are two groups. Docs.* lays out MDX pages: the sidebar, the table of contents and the page itself. OpenAPI.* renders endpoints from a parsed spec.

Each component works on its own. You can also pass children to choose which parts it shows. Here's Resend's "List emails" endpoint with only its header and parameters:

Preview
GEThttps://api.resend.com/emails

Query Parameters

limitinteger

Number of items to return.

Range: >= 1, <= 100
afterstring

Return items after this cursor.

beforestring

Return items before this cursor.

<OpenAPI.Root api={api}>
  <OpenAPI.Operation id="emails-list">
    <OpenAPI.Operation.Header />
    <OpenAPI.Operation.Parameters />
  </OpenAPI.Operation>
</OpenAPI.Root>

Leave out the children and you get the full endpoint page.

Setup

The components use Tailwind CSS v4. Let Tailwind scan the package, then import the styles once:

app/globals.css
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@source "../node_modules/@ariadocs/components/dist";
app/layout.tsx
import "@ariadocs/components/styles.css";

If you use shadcn/ui, the components use your colors. You can render them from Server or Client Components.