Styling Guide

Blockquote

Blockquotes can be styled by adding a class to the blockquote element.

> Your text here

>

<blockquote className="info">Your text here</blockquote>

className=""

className="info"

className="example"

className="warning"

className="error"

Callout

Calloutes can be styled by adding a type to the Callout element. To use the Callout component you must first import it from nextra/components.

import { Callout } from "nextra/components"
 
<Callout type="default">Your text here</Callout>

Code

All code blocks should be wrapped in triple backticks, as well as contain the copy class, and optional filename.

```mdx copy filename="<filename>"
This is a code block
```

Code blocks can also be syntax highlighted by specifying the language after the first set of backticks.

```js
const foo = "bar"
```

Substring and line highlighting is possible by specifying them after the language.

```js /const/
const foo = "bar"
```

```js {1,4-5}
import { useState } from "react"
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```

Images

import Image from "next/image"
 
<Image src="/demo.png" alt="Hello" width={500} height={500} />

We recommend using static image imports using Markdown. Nextra will automatically optimize the images for you.

![demo](/demo.png)

![demo](../somewhere/demo.png)

Result:

Custom CSS

We already support tailwind CSS out of the box. If you want to add your own custom CSS classes, you can do so by adding them to the globals.css file, inside the pages directory.

.custom-class {
  color: red;
}

More coming soon...