Component syntax

Doctave components use an MDX-inspired syntax:

<Card href="/features">
  **Hello, world**

  You can nest Markdown inside components
</Card>

Tags

If you are familiar with HTML, Doctave's component syntax will feel very familiar.

All tags start with a capital letter. This is what distinguishes them from regular HTML tags.

Each tag has an opening tag (<Card>), and an associated closing tag (<Card/>). In between these tags you add optionally include content that will be rendered inside the component. In the above example, there are two paragraphs: **Hello, world**, and You can nest Markdown inside components.

Validation

Importantly, Doctave validates your document structure. If you mismatch tags, you will get an error.

This input...

<Card> Content </Box>

...will give you an error:

Unexpected closing tag `</Box>`, expected corresponding closing tag for `<Card>`

    1 │ <Card> Content </Box>
        ▲              ▲
        │              ╵
        └─ Opening tag
                       ╷
                       └─ Expected close tag

HTML tags

You can also use regular HTML tags like component tags:

<div class="custom-class">**Nesting markdown** inside HTML Is allowed!</div>

Attributes

Each component supports a set of attributes, which can change either the layout or behavior of the component.

For example, the Button component accepts a href attribute, which defines the link the user will be taken to once they click the button:

<Button href="https://www.example.com">Click me!</Button>