Breadcrumbs

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

Callout

No Icon

mdx<Callout className='my-4' type='danger'>
This is a danger callout. It uses the props `type='danger'`.
You can embed **Markdown** inside a `callout`.
</Callout>
 
<Callout className='my-4' type='default'>
This is a default callout. It uses the props `type='default'`.
You can embed **Markdown** inside a `callout`.
</Callout>
 
<Callout className='my-4' type='info'>
This is an info callout. It uses the props `type='info'`.
You can embed **Markdown** inside a `callout`.
</Callout>
 
<Callout className='my-4' type='success'>
This is a success callout. It uses the props `type='success'`.
You can embed **Markdown** inside a `callout`.
</Callout>
 
<Callout className='my-4' type='warning'>
This is a warning callout. It uses the props `type='warning'`.
You can embed **Markdown** inside a `callout`.
</Callout>

This is a danger callout. It uses the props type='danger'. You can embed Markdown inside a callout.

This is a default callout. It uses the props type='default'. You can embed Markdown inside a callout.

This is an info callout. It uses the props type='info'. You can embed Markdown inside a callout.

This is a success callout. It uses the props type='success'. You can embed Markdown inside a callout.

This is a warning callout. It uses the props type='warning'. You can embed Markdown inside a callout.

With Icon

mdx<Callout className='my-4' withIcon type='danger'>
This is a danger callout. It uses the props `type='danger'`.
You can embed **Markdown** inside a `callout`.
</Callout>
 
<Callout className='my-4' withIcon type='default'>
This is a default callout. It uses the props `type='default'`.
You can embed **Markdown** inside a `callout`.
</Callout>
 
<Callout className='my-4' withIcon type='info'>
This is an info callout. It uses the props `type='info'`.
You can embed **Markdown** inside a `callout`.
</Callout>
 
<Callout className='my-4' withIcon type='success'>
This is a success callout. It uses the props `type='success'`.
You can embed **Markdown** inside a `callout`.
</Callout>
 
<Callout className='my-4' withIcon type='warning'>
This is a warning callout. It uses the props `type='warning'`.
You can embed **Markdown** inside a `callout`.
</Callout>

This is a danger callout. It uses the props type='danger'. You can embed Markdown inside a callout.

This is a default callout. It uses the props type='default'. You can embed Markdown inside a callout.

This is an info callout. It uses the props type='info'. You can embed Markdown inside a callout.

This is a success callout. It uses the props type='success'. You can embed Markdown inside a callout.

This is a warning callout. It uses the props type='warning'. You can embed Markdown inside a callout.

You can also add your own icon but specifying the icon prop. For example:

mdx<Callout className='my-4' icon='{<PiCheckCircleLight />}' type='success'>
This is a success callout. It uses the props `type='success'`.
You can embed **Markdown** inside a `callout`.
</Callout>

In order for this to work, withIcon must be set to false.

Card

mdx<Card className='mt-4' href="#">
#### Heading
You can use **markdown** inside cards.
</Card>

Heading

You can use markdown inside cards.

You can also use HTML to embed cards in a grid.

mdx<div className="grid grid-cols-2 gap-2 mt-4">
  <Card href="#">
    #### Card One
    You can use **markdown** inside cards.
  </Card>
 
  <Card href="#">
    #### Card Two
    You can also use `inline code` and code blocks.
  </Card>
</div>

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.

components/mdx.tsx

tsimport { 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:

js<CustomComponent propName="value" />

HTML Elements

You can overwrite HTML elements using the same technique above.

tsconst components = {
  Callout,
  CustomComponent,
  hr: ({ ...props }) => <hr className="my-4 border-slate-200 md:my-6" />,
}

This will overwrite the <hr /> tag or --- in Markdown with the HTML output above.

Styling

Tailwind CSS classes can be used inside MDX for styling.

mdx<p className="text-red-600">This text will be red.</p>

Make sure you have configured the path to your content in your tailwind.config.js file:

tailwind.config.js

js/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./content/**/*.{md,mdx}",
  ],
}

PreviousIntroduction

NextCode Blocks