Components

Every component on this page works in any MDX file in content/ or reference/, without an import. Each section shows the code, then the result.

CalloutCopy Anchor Link

Draws attention to a note, a tip or a gotcha.

<Callout type="warn" title="Keys are secret">
  Never send your API key from a browser.
</Callout>

warning is the same as warn.

GitHub alertsCopy Anchor Link

GitHub's alert syntax works too, in guides, in reference/<api>/*.mdx and in descriptions from the spec:

> [!TIP]
> Send an `Idempotency-Key` with every booking.

The [!KIND] marker must open the blockquote, on its own line or followed by the text. Other blockquotes stay blockquotes. llms.txt, the /md/ pages and Copy Markdown keep the > [!TIP] form. Apps made before this need mdxOptions: orbitMdxOptions() (from @orbitdocs/next/mdx-plugins) on both collections in lib/source.ts, as orbitdocs init now writes it.

StepsCopy Anchor Link

Numbered steps for a procedure. Put a heading and content inside each Step, with blank lines around Markdown:

<Steps>
<Step>

### Install

Run `npm install @orbitdocs/nestjs`.

</Step>
<Step>

### Mark a route

Add `@DocsOperation()` to a controller method.

</Step>
</Steps>

TabsCopy Anchor Link

Alternatives the reader picks from, such as languages or package managers:

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

CardsCopy Anchor Link

Links with a title and a description, in a grid:

<Cards>
  <Card title="Quickstart" href="/get-started/quickstart" description="Docs for your Nest app in five minutes." />
  <Card title="GitHub" href="https://github.com/VitraAI/OrbitDocs" description="Source code." external />
</Cards>

Card takes title, description, href, icon (a React element) and external. A card without href is a plain box.

AccordionsCopy Anchor Link

Collapsed details, for FAQs and long options:

<Accordions>
  <Accordion title="Does extraction start my database?">
    No. Providers are never created in preview mode.
  </Accordion>
  <Accordion title="Can I use a spec file instead?" id="spec-file">
    Yes. Use `source: { file: './openapi.yaml' }`.
  </Accordion>
</Accordions>

Accordion takes title and an optional id. With an id, the URL #spec-file opens that item.

TypeTableCopy Anchor Link

A table of options or fields, with types and defaults:

<TypeTable
  type={{
    group: { type: 'string', description: 'Sidebar group.' },
    order: { type: 'number', description: 'Position in the group.', default: 'last' },
    title: { type: 'string', description: 'Operation title.', required: true },
  }}
/>

Each field takes type, description, default, required, deprecated, and typeDescription (the full type, shown on click).

Code blocksCopy Anchor Link

Fenced code blocks are highlighted and get a copy button. Add a title after the language:

```ts title="src/main.ts"
await app.listen(3000);
```

await app.listen(3000);

Highlight lines, show diffs, focusCopy Anchor Link

Add a comment at the end of a line. The comment is removed from the output:

```ts
const app = await NestFactory.create(AppModule);
mountOrbitDocs(app, { root, path: '/docs' }); 
await app.listen(3000); 
await app.listen(3010); 
```

const app = await NestFactory.create(AppModule);
mountOrbitDocs(app, { root, path: '/docs' }); 
await app.listen(3000); 
await app.listen(3010); 

Use the comment syntax of the block's language, such as # [!code ++] in shell.

Line numbersCopy Anchor Link

```ts lineNumbers
const a = 1;
const b = 2;
```

Code tabsCopy Anchor Link

Consecutive code blocks with a tab attribute become one tabbed block:

```ts tab="TypeScript"
const booking = await orbit.bookings.create({ flightId });
```

```python tab="Python"
booking = orbit.bookings.create(flight_id=flight_id)
```

const booking = await orbit.bookings.create({ flightId });

Package manager tabsCopy Anchor Link

A block with the language npm becomes tabs for npm, pnpm, yarn and bun:

```npm
npm install @orbitdocs/nestjs
```

npm install @orbitdocs/nestjs

Links to operationsCopy Anchor Link

[Create a booking](op:demo/create-a-booking) links to an operation, and <Endpoint api="demo" op="create-a-booking" /> shows its method and path: POST /v1/bookings. See Linking operations.

Landing componentsCopy Anchor Link

Hero, Features, ApiCards, CodeShowcase, Stats, Logos and CallToAction build landing pages. They also work on any page. See Landing pages.

Next stepsCopy Anchor Link