MDX components

Guide pages (content/**/*.mdx) get these components without an import. They come from Fumadocs and from @orbitdocs/next/mdx (orbitMdxComponents). For how to use them in writing, see Components.

CalloutCopy Anchor Link

<Callout type="warn" title="Set basePath first">
  Links break when the base path doesn't match.
</Callout>

Cards and CardCopy Anchor Link

<Cards>
  <Card title="Quickstart" href="/get-started/quickstart" description="Docs running in 5 minutes." />
  <Card title="GitHub" href="https://github.com/VitraAI/OrbitDocs" external />
</Cards>

Cards lays out its children in a grid. Card props:

A card can also take children as its body.

Steps and StepCopy Anchor Link

<Steps>
<Step>
**Install the package.**
</Step>
<Step>
**Add the module.**
</Step>
</Steps>

No props. Each Step gets the next number. Leave a blank line inside a Step when it holds Markdown blocks such as code fences.

Tabs and TabCopy Anchor Link

<Tabs items={['npm', 'pnpm']}>
  <Tab value="npm">`npm install @orbitdocs/nestjs`</Tab>
  <Tab value="pnpm">`pnpm add @orbitdocs/nestjs`</Tab>
</Tabs>

Accordions and AccordionCopy Anchor Link

<Accordions>
  <Accordion title="Does extraction start my database?" id="extraction-db">
    No. Nest preview mode instantiates no providers.
  </Accordion>
</Accordions>

Content is hidden until opened, but browser find-in-page still finds it.

TypeTableCopy Anchor Link

<TypeTable
  type={{
    path: { type: 'string', default: "'/docs'", description: 'URL path to serve under.' },
    root: { type: 'string', required: true, description: 'Folder with the build.' },
  }}
/>

type is an object of fields. Each field takes:

EndpointCopy Anchor Link

An inline link to one operation: a method badge and the path. It links to the operation in the reference.

Create one with <Endpoint api="demo" op="create-a-booking" />.

Create one with POST /v1/bookings.

An unknown API or operation fails the build. orbitdocs check finds them first.

op: linksCopy Anchor Link

Any Markdown link whose target starts with op: points at an operation:

[Create a booking](op:demo/create-a-booking)
[The demo API](op:demo)

op:<api>/<operation> becomes /reference/<api>/<operation>/; op:<api> becomes /reference/<api>/. Broken targets are reported by orbitdocs check and fail orbitdocs build. See Linking operations.

Code blocksCopy Anchor Link

Fenced code is highlighted with Shiki and gets a copy button. Options go after the language:

```ts title="src/main.ts" lineNumbers
mountOrbitDocs(app, { root: docs, path: '/docs' }); 
```

Use the comment style of the language (# in shell and YAML).

MarkdownCopy Anchor Link

GitHub-flavored Markdown works: tables, task lists, strikethrough and autolinks. Headings get anchors and appear in the table of contents.

GitHub alerts (> [!NOTE], > [!TIP], > [!IMPORTANT], > [!WARNING], > [!CAUTION]) render as callouts everywhere: guide pages, operation content (reference/<api>/*.mdx, @DocsContent) and descriptions from the spec. In MDX they become a Fumadocs Callout (info, success, idea, warning, error) through orbitMdxOptions() in lib/source.ts. See GitHub alerts.

Add your own componentsCopy Anchor Link

The guides route passes its components to the page. Add yours next to the OrbitDocs ones:

import { orbitMdxComponents } from '@orbitdocs/next/mdx';
import { createRelativeLink } from 'fumadocs-ui/mdx';

import { Diagram } from '@/components/diagram';

// …
components={orbitMdxComponents(orbit, { a: createRelativeLink(source, page), Diagram }) as Record<string, unknown>}

orbitMdxComponents(config, extra) merges extra over the defaults and keeps op: links working with whatever a you pass.

Landing sectionsCopy Anchor Link

Section components for landing pages; they also work on any guide page. Each animates in on scroll and respects "reduce motion". Landing pages has an example of every one.

LandingAction is { text: string; href: string; icon?: string; variant?: 'primary' | 'secondary' | 'ghost' }. Icons are Lucide names (rocket) or Simple Icons brands (SiGithub). Heading props shared by Section, Features, Bento, Flow, Showcase, Comparison and ApiCards: eyebrow, title, description, align ('left' | 'center').

For your own animated components, @orbitdocs/next also exports Reveal, RevealGroup and RevealItem (scroll-in animations) and CountUp.