Components

GraphStaff auto-imports its component library into every MDX page. This page demonstrates each one.

Callouts

Note:

A note for neutral, supplementary information.

Info:

An info callout for background context.

Tip:

A tip for best practices and shortcuts.

Warning:

A warning for things that can go wrong.

Success:

A check for success states and confirmations.

Danger:

A danger callout for destructive or irreversible actions.

Callout syntax

<Note>Use notes for neutral, supplementary information.</Note>
<Info>Use info callouts for background context.</Info>
<Tip>Use tips for best practices and shortcuts.</Tip>
<Warning>Back up your database before running this command.</Warning>
<Check>The deployment completed successfully.</Check>
<Danger>This action permanently deletes the project.</Danger>

Cards and columns

Card with icon

Cards link to pages and take an optional icon by name.

Plain card

Cards also work without an icon or link.

Card and column syntax

<Columns cols={2}>
  <Card title="Quickstart" icon="book-open" href="/quickstart">
    Build your first documentation site.
  </Card>
  <Card title="Components">
    Browse the built-in component library.
  </Card>
</Columns>

Tabs

macOS

Install with Homebrew: brew install graphstaff

Linux

Install with the shell script: curl -fsSL https://example.com/install.sh | sh

Windows

Install with winget: winget install graphstaff

Tab syntax

<Tabs>
  <Tab title="macOS">Run `brew install graphstaff`.</Tab>
  <Tab title="Linux">Run the shell installer.</Tab>
</Tabs>

Code groups

pnpm

pnpm add @graphstaff/ai-client

npm

npm install @graphstaff/ai-client

CodeGroup syntax

<CodeGroup>

```sh title="pnpm"
pnpm add @graphstaff/ai-client
```

```sh title="npm"
npm install @graphstaff/ai-client
```

</CodeGroup>

Steps

First

Steps render an ordered, numbered sequence.

Second

Each step takes a title and arbitrary content.

Steps syntax

<Steps>
  <Step title="Create the page">
    Add an MDX file under `pages/`.
  </Step>
  <Step title="Add it to navigation">
    Put its path in `docs.json`.
  </Step>
</Steps>

Accordions

What is an accordion?

A collapsible section for content most readers can skip.

Can they group?

Yes — an AccordionGroup renders a connected stack.

Accordion syntax

<AccordionGroup>
  <Accordion title="What is an accordion?">
    A collapsible section for optional details.
  </Accordion>
  <Accordion title="Can accordions be grouped?">
    Yes. Wrap them in `AccordionGroup`.
  </Accordion>
</AccordionGroup>

Expandable and Frame

Show the details

Expandable is the inline single-item variant of an accordion.

Frames wrap images and give them a caption.

Expandable and Frame syntax

<Expandable title="Show the details">
  Put optional details here.
</Expandable>

<Frame caption="A caption for the image.">
  <img src="/images/example.png" alt="Example" />
</Frame>

Video

Native video exampleA short CC0 video used to demonstrate the responsive player.

Add a written transcript or detailed summary here so Ask AI can answer questions about information that appears only in the video.

Video syntax

<Video
  title="Export walkthrough"
  src="https://cdn.example.com/export.mp4"
  summary="Shows how to export the complete result set."
>
  Optional transcript or additional written instructions.
</Video>

API documentation fields

querypathstringrequired

The search query. ParamField documents request parameters.

answerstring

The synthesized answer. ResponseField documents response fields.

ParamField syntax

<ParamField path="query" type="string" required>
  The search query.
</ParamField>

ResponseField syntax

<ResponseField name="answer" type="string">
  The synthesized answer.
</ResponseField>