Components

Doctave comes with a library of UI and layout components. You've already seen some in action on the README.md page. Here are some other examples of what you can do with Doctave components.

You can find the full documentation for Doctave's components in our online documentation:

Read the docs ›

Multi-language code examples

Very useful when you have code snippets in multiple languages.

Syntax:

README.md

<CodeSelect title="Hello world in multiple language">
  ```typescript
  console.log("Hello, world")
  ```

  ```rust
  println!("Hello, world")
  ```
</CodeSelect>

Output:

Hello world in multiple language

console.log("Hello, world")

Tabs

Syntax:

README.md

<Tabs>
    <Tab title="First">
        This is the content for tab **1**.
    </Tab>
    <Tab title="Second">
        ```
        This is the content for tab 2 inside a code block
        ```
    </Tab>
    <Tab title="Third">
        This is the content for tab **3**.
    </Tab>
</Tabs>

Output:

This is the content for tab 1.

Steps

<Steps> let you describe a sequence of steps required for an action.

Syntax:

README.md

<Steps>
  <Step title="Step one">
    Requirements for **step one**
  </Step>
  <Step title="Step two">
    Requirements for **step two**
  </Step>
</Steps>

Output:

Step one
Requirements for step one
Step two
Requirements for step two