Basedoc provides a set of custom content blocks, or "components", that can be used to create your documentation.

These are helpful additional types of content that Markdown does not natively support, and can be mixed in with your Markdown content.

To use components in your Markdown files, your files must be .mdx files, not regular .md files.

Callout

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

Specify the type of callout with the type parameter:

• info: A general information callout (grey)
• warning: A warning callout (orange)
• danger: A danger or error callout (red)
• success: A success callout (green)

Card

<Card title="Card title" /​>

<Card title="Card title" icon="book-check">
  Example card content.
</Card>

<Card title="Card with link" href="/docs" icon="book-check">
  Example card content.
</Card>

Add optional Markdown content to the card by wrapping it in a <Card> component.

Parameters:

• title: The title of the card.
• icon (optional): A Lucide icon name in kebab-case, like book-check.
• href (optional): Link the card to another page or external URL.

Grid

Use a grid to display content in a grid layout, up to 3 columns.

Typically used with Card components but can contain any element or component.

<Grid columns="2">
  <Card title="Documentation" href="/docs" icon="book">
    Read our docs.
  </Card>
  <Card title="API Reference" href="/api" icon="code">
    API documentation with **examples**.
  </Card>
</Grid>

Parameters:

• columns: The number of columns to display, up to 3. Default is 2.

Tabs

Tabs are useful for related content in a single place on a page.

Add a <Tabs> component to your page and then add one or more <Tab> components inside it.

label is required and is used to identify the tab.

The content inside a <Tab> can be any valid Markdown and can include other components.

<Tabs>
  <Tab label="First tab">
    This is the content for tab 1.

    - list item 1
    - list item 2
    - list item 3
  </Tab>
  <Tab label="Second tab">
    This is the **content for tab 2**.
  </Tab>
</Tabs>

Code tabs

Code tabs are useful for displaying code examples in different languages.

Just wrap your code blocks in a <CodeTabs> component and make sure to include the language name on the first line of the code block.

<CodeTabs>
  ```javascript
  console.log("Hello, World!");
  ```
  ```python
  print("Hello, World!")
  ```
  ```php
  echo "Hello, World!";
  ```
</CodeTabs>

  console.log("Hello, World!");

  print("Hello, World!")

  echo "Hello, World!";