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

<Callout type=" default | warning | danger ">
 
This is a default callout. You can embed **Markdown** inside a `callout`.
 
</Callout>

This is a default callout. You can embed Markdown inside a callout.

This is a warning callout. It uses the props type="warning".

This is a danger callout. It uses the props type="danger".

2. Card

<Card 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.

<div className="grid grid-cols-2 gap-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.

Contentlayer Code Blocks