Components — Sambadocs Docs

sambadocsDocs

Beyond Markdown, Sambadocs ships a small set of components for the things docs need most. This page shows each one rendering live — exactly how it looks on your published site.

Callouts

Use <Callout> to highlight notes, tips, warnings, and errors. The type controls the color and meaning:

Info

The default. Carries the brand tint — good for tips and context.

Success

For confirmations and “you’re done” moments.

Warning

For gotchas and things that need care before proceeding.

Error

For destructive actions or hard requirements.

mdx

<Callout type="warn" title="Heads up">
  Builds publish from your default branch only.
</Callout>

Tabs

Group alternative content — language variants, OS-specific steps — with <Tabs> and <Tab label="…">:

bash

npm install acme

mdx

<Tabs>
  <Tab label="npm">npm install acme</Tab>
  <Tab label="pnpm">pnpm add acme</Tab>
</Tabs>

Code blocks

Fenced code blocks get light and dark syntax highlighting, line wrapping, and a copy button. Add the language after the opening fence:

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

Inline code works with single backticks.

Mermaid diagrams

Use a mermaid code fence to render a diagram. Readers can inspect its source, expand it, and zoom in. In the editor, choose Insert → Mermaid diagram; switch between the source and Preview diagram as you write.

Diagram

Rendering diagram…

```mermaid
flowchart LR
  Write --> Preview --> Publish --> Read
```

Use accTitle and accDescr to describe diagrams for assistive technology. Invalid diagrams keep their source visible so you can correct them.

Steps

Use steps for a short sequence of actions. Each step can contain Markdown, code, and other components.

Create a base

Give related documents a shared home.

Add content

Write a page or import a source.

Share it

Choose who can access the finished documentation.

mdx

<Steps>
  <Step title="Create a base">Give related documents a shared home.</Step>
  <Step title="Add content">Write a page or import a source.</Step>
</Steps>

Expandable details

Keep optional explanations close to the relevant content with an accordion.

Can I preview without publishing?

Yes. Preview in the editor includes unsaved changes. Return to Edit to keep writing, then save and publish when ready.

mdx

<Accordion title="Can I preview without publishing?">
  Yes. Preview includes the latest changes in your editor.
</Accordion>

Cards

Use cards to point readers toward related guides. Omit href for a card that only presents information.

Writing pages

Learn frontmatter and Markdown basics.

API reference

Generate documentation from an OpenAPI spec.

mdx

<CardGroup>
  <Card title="Writing pages" href="/docs/writing-pages">
    Learn frontmatter and Markdown basics.
  </Card>
</CardGroup>

Writing pages — frontmatter and Markdown basics.
API reference from OpenAPI — generate API docs from a spec.