Zum Hauptinhalt springen

Components

Docsio ships a small set of pre-styled components for .mdx pages. They render fast, match your theme, and work in dark mode.

To use them, save your page as .mdx (not .md) and import at the top:

import {Card, CardGrid} from '@site/src/components/Card';

Card

A clickable card with an optional icon and arrow.

<Card title="Quickstart" href="/docs/getting-started/quickstart" icon={<i className="ph ph-rocket" />}>
  Get up and running in five minutes.
</Card>

Props:

  • title (string, required) — bold heading inside the card.
  • href (string) — makes the card a link. If omitted, renders as a static card.
  • icon (ReactNode) — leading icon. Use a Phosphor icon (<i className="ph ph-rocket" />) or any inline SVG.
  • children (ReactNode) — description text below the title.

CardGrid

Wraps multiple <Card> components in a responsive grid.

<CardGrid cols={2}>
  <Card title="From a URL" href="/docs/getting-started/from-a-url" icon={<i className="ph ph-globe" />}>
    Paste your product URL.
  </Card>
  <Card title="From your files" href="/docs/getting-started/from-files" icon={<i className="ph ph-files" />}>
    Drag in PRDs, internal wikis, API specs.
  </Card>
</CardGrid>

Props:

  • cols (number, default 2) — column count on desktop. Mobile collapses to 1 column.

Admonitions

Not technically a component — built into markdown. Five types:

:::note
A neutral note.
:::

:::tip
A helpful tip.
:::

:::info
Background info.
:::

:::warning
A heads-up.
:::

:::danger
Something to be careful about.
:::

Each renders as a colored callout block.

Phosphor icons

Use any Phosphor icon inline:

<i className="ph ph-rocket" />
<i className="ph ph-book-open" />
<i className="ph ph-git-branch" />

The CSS for Phosphor is loaded automatically on every Docsio site.

Tabs

For showing the same content in multiple variants (e.g. macOS / Windows / Linux):

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="macos" label="macOS" default>
    `brew install docsio`
  </TabItem>
  <TabItem value="windows" label="Windows">
    `winget install docsio`
  </TabItem>
  <TabItem value="linux" label="Linux">
    `apt install docsio`
  </TabItem>
</Tabs>

Details / collapse

Native HTML, no component needed:

<details>
  <summary>Click to expand</summary>

Hidden content goes here.

</details>

What you can't do

  • Custom React components. You can't write your own. Use the built-ins.
  • <script> tags. Removed for security.
  • <style> tags inline. Use Custom CSS instead.

If you need a component we don't ship, request it from support — we add new ones in roughly priority of how many people ask for them.

Tips

  • .mdx only when needed. Plain .md is fine for 95% of pages. .mdx adds a tiny build cost; only switch when you need a component.
  • Don't over-card. A grid of three cards is helpful; a grid of fifteen cards is a sitemap. Use prose between when there's real content to teach.
  • Test in dark mode. Cards and admonitions should be readable; if you've set custom colors, switch the theme toggle and verify.