Components

Built-in MDX components, available in every page without imports.

On this page

These components are available in all .mdx pages, without importing them. They render to static HTML, and only tabs ship a few lines of JavaScript. Plain .md pages cannot use components: rename the file to .mdx when a page needs one.

Callout

The component form of callouts.

<Callout type="warning" title="Heads up">
  Callouts can contain **any** Markdown content.
</Callout>

Cards

Installation

Get started in a few minutes.

Theming

Make it yours.

<Cards>
  <Card title="Installation" href="/installation/" icon="zap">
    Get started in a few minutes.
  </Card>
</Cards>

Tabs

Tabs sharing a groupId switch together, and persist remembers the choice across pages. items sets the order of the tab list; without it, the list is built from the value of each <Tab>. defaultValue picks the tab shown first.

JavaScript

export const add = (a, b) => a + b;

TypeScript

export const add = (a: number, b: number) => a + b;

JavaScript

This tab switches along with the one above.

TypeScript

So does this one.

<Tabs items={['JavaScript', 'TypeScript']} groupId="language" persist>
  <Tab value="JavaScript">…</Tab>
  <Tab value="TypeScript">…</Tab>
</Tabs>

Without JavaScript, all tabs are displayed one after the other.

Steps

Write

Add a Markdown file to the docs directory.

Build

Run zenith build, or astro build in an Astro project.

You can also wrap a series of level 3 headings in <Steps> without using <Step>, as on the installation page.

Accordion

Accordions use the native <details> element. Accordions with the same group close each other, and open expands one when the page loads.

Does ZenithDocs need JavaScript?

No. Pages are fully usable without it.

Can I use my own components?

Yes, import any Astro component in an MDX page.

Files

src

content.config.ts

content

index.mdx

astro.config.mjs

<Files>
  <Folder name="src" defaultOpen>
    <File name="content.config.ts" />
  </Folder>
  <File name="astro.config.mjs" />
</Files>

Icon

One of the built-in icons, inline in the text: . Give it a label when the icon carries meaning on its own, so screen readers announce it.

Press <Icon name="search" label="Search" /> to search.

APIPage

Renders operations of an OpenAPI document, see OpenAPI.

<APIPage spec="rockets" path="/rockets" method="get" />