Docs
All MDX components

All MDX components

Preview of all MDX components that you can use in your MDX document.

All components are defined in mdx-components.tsx file. Below provided a list of all components that you can use in your MDX document. But also, you can add your own components to the mdx-components.tsx file.

Accordion


Docs

Syntax:

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>
      Is DoFastDocs is the best documentation tool?
    </AccordionTrigger>
    <AccordionContent>Yes. Because it's fast and easy to use.</AccordionContent>
  </AccordionItem>
</Accordion>

Preview:

Callout


Docs

Syntax:

<Callout title="MDX syntax" icon="info">
  If you're not familiar with markdown syntax, you can check the HTML equivalent
  <ins>
    <a href="https://www.markdownguide.org/basic-syntax/" target="_blank">
      here
    </a>
  </ins>
</Callout>

Preview:

h1

Syntax:

# One number sign…

One number sign…

h2

## Two number sign…

Two number signs…

h3

### Three number sign…

Three number sign…

h4

#### Four number sign…

Four number sign…

h5

##### Five number sign…

Preview:

Five number sign…

h6

###### Six number sign…
Six number sign…

Links

Syntax:

[DoFastDocs](https://dofastdocs.com)

Preview:

DoFastDocs

Paragraphs

Syntax:

This is a paragraph. It contains some text to show you how a paragraph looks like in MDX.

Preview:

This is a paragraph. It contains some text to show you how a paragraph looks like in MDX.

Lists

Unordered List

Syntax:

- Item 1
- Item 2
  - Subitem 2.1
  - Subitem 2.2
- Item 3

Preview:

  • Item 1
  • Item 2
    • Subitem 2.1
    • Subitem 2.2
  • Item 3

Ordered List

Syntax:

1. First item
2. Second item
3. Third item

Preview:

  1. First item
  2. Second item
  3. Third item

Blockquotes

Syntax:

> This is a blockquote. It can span multiple lines and include other markdown elements.

Preview:

This is a blockquote. It can span multiple lines and include other markdown elements.

Images

Syntax:

![Your alt text here](/images/docs/dofastdocs.com_document_path_structure.jpg)

Preview:

Your alt text here

Horizontal Rule

Syntax:

---

Preview:

Tables

Syntax:

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

Preview:

SyntaxDescription
HeaderTitle
ParagraphText

Inline code

Syntax:

`const a = 2;`

Preview:

const a = 2;

Codeblock

Syntax:

```tsx {2,4} showLineNumbers
  <TabsTrigger
      className={cn(
        "relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none",
        className
      )}
```

Preview:

  <TabsTrigger
      className={cn(
        "relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none",
        className
      )}

Tabs

Syntax:

<Tabs defaultValue="be">
 
<TabsList>
  <TabsTrigger value="be">Be</TabsTrigger>
  <TabsTrigger value="not-to-be">Or not to be</TabsTrigger>
</TabsList>
 
<TabsContent value="be">
  "Be" here represents the choice to embrace documentation, to arm oneself with
  the power of knowledge, and to confront the sea of coding challenges with the
  shield of clarity.
</TabsContent>
 
<TabsContent value="not-to-be">
  "Or not to be" reflects the existential dread of facing undocumented code,
  where one must navigate the undiscovered country of cryptic functions and
  variables, possibly never to return to sanity.
</TabsContent>
 
</Tabs>

Preview:

"Be" here represents the choice to embrace documentation, to arm oneself with the power of knowledge, and to confront the sea of coding challenges with the shield of clarity.

External Link

Syntax:

<ExternalLink
  href="https://x.com/maxrusakovic?ref=dofastdocs.com"
  label="Max Rusakovic tweeter"
/>

Preview:

Max Rusakovič twitter
Codeblock