Components
Use React components in Markdown using MDX.
The following components are available out of the box for use in Markdown.
If you’d like to build and add your own custom components, see the Custom Components section below.
Built-in Components
1. Callout
This is a default callout. You can embed **Markdown** inside a `callout`.
This is a default callout. You can embed Markdown inside a callout
.
This is a info callout. It uses the props type="info"
.
This is a warning callout. It uses the props type="warning"
.
This is a danger callout. It uses the props type="danger"
.
2. Card
#### Heading
You can use **markdown** inside cards.
Heading
You can use markdown inside cards.
You can also use HTML to embed cards in a grid.
#### Card One
You can use **markdown** inside cards.
#### Card Two
You can also use `inline code` and code blocks.
Card One
You can use markdown inside cards.
Card Two
You can also use inline code
and code blocks.
Custom Components
You can add your own custom components using the components
props from useMDXComponent
.
import { Callout } from "@/components/callout"
import { CustomComponent } from "@/components/custom"
const components = {
Callout,
CustomComponent,
}
export function Mdx({ code }) {
const Component = useMDXComponent(code)
return (
<div className="mdx">
<Component components={components} />
</div>
)
}
Once you’ve added your custom component, you can use it in MDX as follows:
<CustomComponent propName="value" />
HTML Elements
You can overwrite HTML elements using the same technique above.
const components = {
Callout,
CustomComponent,
hr: ({ ...props }) => <hr className="my-4 border-slate-200 md:my-6" />,
}
This will overwrite the <hr />
tag or ---
in Mardown with the HTML output above.
Styling
Tailwind CSS classes can be used inside MDX for styling.
This text will be red.
Make sure you have configured the path to your content in your tailwind.config.js
file:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./content/**/*.{md,mdx}",
],
}