Component Reference

All available documentation components and how to use them.

Terminal

A styled terminal window with macOS-style chrome. Use for CLI examples.

$ nf node list
ID        HOSTNAME        ROLE       IP
a1b2c3d4  worker-01       worker     10.0.0.10
e5f6a7b8  worker-02       worker     10.0.0.11

<Terminal title="Example usage">
$ nf node list
</Terminal>

Example

A simpler code block with a label. Use for config snippets or non-terminal code.

adapter: auto
port: 3000

<Example title="JSON config">
adapter: auto
</Example>

CardGrid + Card

A responsive grid of linked cards with optional icons.

Available icons: node, images, ceph, network, disks, s3, user, ssh, nics, tasks, templates, license, fs, mon, osd, mds, mgr, rgw.

<CardGrid>
  <Card title="Quick Start" description="Get started fast." href="/quickstart" icon="node" />
  <Card title="Architecture" description="System overview." href="/architecture" icon="ceph" />
</CardGrid>

CommandGroup + Command

Groups CLI commands with a styled header. Use in CLI reference pages.

<CommandGroup title="nf example">
  <Command name="nf example list">
    <p>List all examples.</p>
    <Flags>
      <Flag name="--json">Output as JSON</Flag>
    </Flags>
  </Command>

  <Command name="nf example create">
    <p>Create a new example.</p>
    <Flags>
      <Flag name="--name" required>Example name</Flag>
      <Flag name="--count" value="10">Number of items</Flag>
    </Flags>
  </Command>
</CommandGroup>

Flags + Flag

A flag table for CLI command options. Supports required and value (default) props.

<Flags>
  <Flag name="--output" required>Output format</Flag>
  <Flag name="--limit" value="100">Max results</Flag>
  <Flag name="--verbose">Enable verbose logging</Flag>
</Flags>

Endpoint

API endpoint documentation with method badge, path, and optional response panel.

[
  {
    "id": "abc-123",
    "name": "My Item",
    "status": "active"
  }
]

{ "status": "created" }

<Endpoint method="GET" path="/example/items" response={`[{"id": "abc"}]`}>
  <p>List all items.</p>
</Endpoint>

<Endpoint method="POST" path="/example/items" description="Admin">
  <p>Create an item.</p>
  <ParamTable>
    <Param name="name" type="string" required>Item name</Param>
  </ParamTable>
</Endpoint>

ParamTable + Param

Document request/response fields. Each param shows name, type badge, and description.

<ParamTable>
  <Param name="id" type="UUID">Unique identifier</Param>
  <Param name="name" type="string" required>Display name</Param>
  <Param name="count" type="int">Number of items</Param>
</ParamTable>

Callout

Styled callout boxes for notes, warnings, and tips.

<Callout type="note">
  <p>Informational note here.</p>
</Callout>

<Callout type="warn">
  <p>Warning message here.</p>
</Callout>

<Callout type="tip">
  <p>Helpful tip here.</p>
</Callout>

Steps

A numbered step-by-step guide with a vertical progress line.

<Steps>
  <Step num="1" title="Install NodeFoundry">
    <p>Download and run the installer.</p>
  </Step>
  <Step num="2" title="Configure networking">
    <p>Set up DHCP for PXE boot.</p>
  </Step>
</Steps>

Badge

Inline status badges for labeling features, versions, or states.

<Badge type="success">Stable</Badge>
<Badge type="warn">Beta</Badge>
<Badge type="error">Deprecated</Badge>
<Badge type="info">New</Badge>
<Badge>Default</Badge>

Figure

Image component with optional caption, border, and rounded corners.

<Figure
  src="/images/dashboard.png"
  alt="Dashboard screenshot"
  caption="The NodeFoundry dashboard."
/>

Video

Responsive 16:9 video embed. Supports YouTube URLs (auto-converts to embed) or any iframe-compatible source.

<Video
  src="https://www.youtube.com/watch?v=VIDEO_ID"
  title="Getting started with NodeFoundry"
/>

Accordion

Collapsible sections for FAQs, optional details, or advanced configuration.

<Accordion title="Question here?">
  <p>Answer here.</p>
</Accordion>

Tabs

Tabbed content panels. The tabs prop defines the labels, and the child snippet receives the active tab index.

curl -X POST http://master:3000/api/ceph/osd \
  -H "Content-Type: application/json" \
  -d '...'

Note — Tabs use Svelte snippets and work best in .svelte files. In .md files, avoid curly braces in tab content.

FileTree

Display directory structures with styled indentation.

<FileTree items={[
  { name: "src", children: [
    { name: "lib", children: [
      { name: "index.ts" },
    ]},
  ]},
  { name: "package.json" },
]} />

LinkCard

Prominent navigation links to related pages. Includes a hover arrow animation.

<LinkCard
  title="Quick Start Guide"
  description="Deploy your first cluster in 15 minutes."
  href="/quickstart"
/>

KeyCombo

Render keyboard shortcuts with styled key caps. Pass keys separated by +.

Press Ctrl+ K to open search. Use Esc to close.

Copy with Cmd+ C or Ctrl+ Shift+ V to paste without formatting.

<KeyCombo keys="Ctrl + K" />
<KeyCombo keys="Cmd + Shift + P" />
<KeyCombo keys="Esc" />

Markdown Features

Standard markdown is fully supported:

Tables

Blockquotes

Note — This is an informational callout using a standard blockquote.

Inline code

Use backticks for inline code like nf node list or paths like /etc/ceph/ceph.conf.

Lists

• Unordered items work as expected
• With bold and code inline
• And links too

1. Ordered lists
2. Also work
3. As expected