Barodoc Components

Barodoc Components

Components available in @barodoc/theme-docs for building documentation.

Import in MDX

import { Callout, Card, CardGroup, Tabs, Tab, Steps, Step } from "@barodoc/theme-docs/components/mdx";
import { ApiEndpoint, ApiParams, ApiParam, ApiResponse } from "@barodoc/theme-docs/components/api";

MDX Components

Callout

Highlighted information boxes with different types.

<Callout type="info" title="Note">
  This is an informational callout.
</Callout>

<Callout type="warning" title="Caution">
  Be careful with this operation.
</Callout>

<Callout type="tip" title="Pro Tip">
  Here's a helpful suggestion.
</Callout>

<Callout type="danger" title="Warning">
  This action cannot be undone.
</Callout>

Props:

Styles:

Card

Clickable card with title and description.

<Card title="Getting Started" icon="🚀" href="/docs/quickstart">
  Learn how to set up your first documentation site.
</Card>

<Card title="Configuration" icon="⚙️">
  Configure your site settings and navigation.
</Card>

Props:

CardGroup

Grid layout for multiple cards.

<CardGroup cols={2}>
  <Card title="Installation" href="/docs/install">
    Install Barodoc in your project.
  </Card>
  <Card title="Configuration" href="/docs/config">
    Configure your documentation site.
  </Card>
</CardGroup>

Props:

Tabs

Tabbed content sections.

<Tabs items={[
  { label: "npm", value: "npm", children: <code>npm install barodoc</code> },
  { label: "pnpm", value: "pnpm", children: <code>pnpm add barodoc</code> },
  { label: "yarn", value: "yarn", children: <code>yarn add barodoc</code> },
]} defaultValue="pnpm" />

Props:

TabItem:

interface TabItem {
  label: string;    // Tab button text
  value: string;    // Unique identifier
  children: ReactNode;  // Tab content
}

Steps

Numbered step-by-step guide.

<Steps>
  <Step title="Install dependencies">
    Run `npm install` to install all required packages.
  </Step>
  <Step title="Configure settings">
    Create `barodoc.config.json` with your site settings.
  </Step>
  <Step title="Start development">
    Run `barodoc serve` to start the development server.
  </Step>
</Steps>

Step Props:

CodeGroup

Group multiple code blocks with tabs.

<CodeGroup>
```javascript title="JavaScript"
const config = require('./config');

import config from './config';

API Components

ApiEndpoint

Display API endpoint information.

<ApiEndpoint method="GET" path="/api/users/{id}" description="Retrieve a user by ID">
  Returns a single user object.
</ApiEndpoint>

<ApiEndpoint method="POST" path="/api/users" description="Create a new user">
  Creates a user and returns the created object.
</ApiEndpoint>

Props:

Method Colors:

ApiParams

Container for API parameters.

<ApiParams>
  <ApiParam name="id" type="string" required>
    User ID
  </ApiParam>
  <ApiParam name="email" type="string" required>
    User email address
  </ApiParam>
  <ApiParam name="name" type="string">
    Display name (optional)
  </ApiParam>
</ApiParams>

ApiParam

Individual parameter documentation.

Props:

ApiResponse

Document API responses.

<ApiResponse status={200}>
```json
{
  "id": "usr_123",
  "email": "user@example.com",
  "name": "John Doe"
}

Props:

Interactive Components

ThemeToggle

Dark/light mode toggle (included in header).

import { ThemeToggle } from "@barodoc/theme-docs";

<ThemeToggle />

Search

Search component (included in header when enabled).

import { Search } from "@barodoc/theme-docs";

<Search />

Uses Pagefind for client-side search.

Layout Components

BaseLayout

Base HTML layout with theme support.

---
import { BaseLayout } from "@barodoc/theme-docs/layouts/BaseLayout.astro";
---

<BaseLayout title="Page Title" description="Page description">
  <main>Content</main>
</BaseLayout>

DocsLayout

Full documentation layout with sidebar, header, and TOC.

---
import { DocsLayout } from "@barodoc/theme-docs/layouts/DocsLayout.astro";
---

<DocsLayout
  title="Getting Started"
  description="Learn how to get started"
  headings={headings}
>
  <Content />
</DocsLayout>

Props:

Complete Example

---
title: API Reference
description: Complete API documentation
---

import { Callout, Card, CardGroup, Steps, Step } from "@barodoc/theme-docs/components/mdx";
import { ApiEndpoint, ApiParams, ApiParam, ApiResponse } from "@barodoc/theme-docs/components/api";

# API Reference

<Callout type="info">
  All API endpoints require authentication.
</Callout>

## Authentication

<ApiEndpoint method="POST" path="/api/auth/login" description="Authenticate user">
  <ApiParams>
    <ApiParam name="email" type="string" required>
      User email
    </ApiParam>
    <ApiParam name="password" type="string" required>
      User password
    </ApiParam>
  </ApiParams>

  <ApiResponse status={200}>
    ```json
    { "token": "eyJhbGc..." }
    ```
  </ApiResponse>
</ApiEndpoint>

## Landing (marketing / SaaS-style)

Use for standalone pages with `pageLayout: landing` (full-width; not `layout` — reserved in Astro 5). Import from `@barodoc/theme-docs`:

- `LandingHero` — badge, title + optional gradient `titleHighlight`, CTAs, optional `snippet` (use **`client:load`** for copy button)
- `LandingLogoStrip` — “trusted by” name row
- `LandingStats` — metric cells (`value` + `label`)
- `LandingFeatures` — section title + `items` (icon, title, description)
- `LandingTestimonials` — quote cards
- `LandingPricing` — tier cards + `highlighted`
- `LandingFaq` — `<details>` Q&A
- `LandingCta` — closing headline + button
- `LandingFooter` — tagline, optional logo, links

YAML order under `landingPage:`: hero → logoStrip → stats → features → testimonials → pricing → faq → cta → footer.

See `docs/src/content/docs/en/guides/landing.mdx` in the Barodoc repo.

## Quick Start

<Steps>
  <Step title="Get API Key">
    Sign up at the dashboard to get your API key.
  </Step>
  <Step title="Install SDK">
    Install our SDK using your package manager.
  </Step>
  <Step title="Make First Request">
    Use the code samples below to make your first API call.
  </Step>
</Steps>

## Related Resources

<CardGroup cols={2}>
  <Card title="SDK Reference" icon="📚" href="/docs/sdk">
    Full SDK documentation
  </Card>
  <Card title="Examples" icon="💡" href="/docs/examples">
    Code examples and tutorials
  </Card>
</CardGroup>

Converted and distributed by TomeVault — claim your Tome and manage your conversions.