Docs
MDX document

MDX document

How to create a MDX document with markdown syntax

Heading

It's a mandatory part for creating markdown document. You document should contain at least title and description.

---
title: MDX document
description: How to create a MDX document with markdown syntax
---

Example of markdown .mdx file

---
title: Theming
description: How to customize colors in your documentation
---
 
### Simple theming, just update `globals.css` file
 
We have a `globals.css` file in the `src/styles/globals.css` folder. You can update the color of the code block by updating the `globals.css` file for light and/or dark modes.
In `:root` section you could update colors for light mode, and in `.dark` section - for dark mode.

Modify markdown

The main markdown components are styled in src/components/Mdx/mdx-components.tsx file. For example, if you want to change style for h3 component, change it for appropriate key in mdxComponents object.

  h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
    <h3
      className={cn(
        "font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
        className
      )}
      {...props}
    />
  ),

Additional markdown component

Markdown components are limited. And sometimes we need to add custom components. To do it, in mdx-components.tsx file, you can add new component to mdxComponents object. For example, Tabs component.

  Tabs: ({ className, ...props }: React.ComponentProps<typeof Tabs>) => (
    <Tabs className={cn("relative mt-6 w-full", className)} {...props} />
  ),

Now you could use this component in your .mdx file. No need to import component! The component will be recognized automatically after adding it to mdx-components.tsx file.

<Tabs>
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
</Tabs>

PlanningCodeblock