---
title: "Prose Components"
description: "A list of Prose components."
canonical_url: "https://content.nuxt.com/docs/components/prose"
---
# Prose Components
> A list of Prose components.
Prose components are replacements for HTML typography tags. Prose components provide a simple way to customize content UI.
To overwrite a prose component, create a component with the same name in your project `components/content/` directory (ex: `components/content/ProseA.vue`).
Prose components are originally part of [`@nuxtjs/mdc`](https://github.com/nuxt-modules/mdc).
## `ProseA`
```md [Code]
[Prose Components](/docs/components/prose)
```
[Prose Components](https://content.nuxt.com/docs/components/prose)
## `ProseBlockquote`
```md [Code]
> Block quote
```
> Block quote
## `ProsePre`
```md [Code]
```js [file.js]{2} meta-info=val
export default () => {
console.log('Code block')
}
```
```
```js [file.js]
export default () => {
console.log('Code block')
}
```
Component properties will be:
```json
{
code: "export default () => {\n console.log('Code block')\n}"
language: "js"
filename: "file.js"
highlights: [2]
meta: "meta-info=val"
}
```
Check out the [highlight options](https://content.nuxt.com/docs/getting-started/configuration#highlight) for more about the syntax highlighting.
If you want to use `]` in the filename, you need to escape it with 2 backslashes: `\\]`. This is necessary since JS will automatically escape the backslash in a string so `\]` will be resolved as `]` breaking our regex.
## `ProseCode`
```md [Code]
`code`
`const code: string = 'highlighted code inline'`{lang="ts"}
```
`code`
`const code: string = 'highlighted code inline'`
## `ProseH1`
```md [Code]
# H1 Heading
```
# H1 Heading
## `ProseH2`
```md [Code]
## H2 Heading
```
## H2 Heading
## `ProseH3`
```md [Code]
### H3 Heading
```
### H3 Heading
## `ProseH4`
```md [Code]
#### H4 Heading
```
#### H4 Heading
## `ProseH5`
```md [Code]
##### H5 Heading
```
##### H5 Heading
## `ProseH6`
```md [Code]
###### H6 Heading
```
###### H6 Heading
## `ProseHr`
```md [Code]
Divider under.
---
Divider above.
```
Divider under.
---
Divider above.
## `ProseImg`
```md [Code]
```
## `ProseUl`
```md [Code]
- Just
- An
- Unordered
- List
```
- Just
- An
- Unordered
- List
## `ProseLi`
```md [Code]
- List element
```
- List element
## `ProseOl`
```md [Code]
1. Foo
2. Bar
3. Baz
```
1. Foo
2. Bar
3. Baz
## `ProseP`
```md [Code]
Just a paragraph.
```
Just a paragraph.
## `ProseStrong`
```md [Code]
**Just a strong paragraph.**
```
**Just a strong paragraph.**
## `ProseEm`
```md [Code]
_Just an italic paragraph._
```
*Just an italic paragraph.*
## `ProseTable`
```md [Code]
| Key | Type | Description |
| --- | --------- | ----------- |
| 1 | Wonderful | Table |
| 2 | Wonderful | Data |
| 3 | Wonderful | Website |
```
|
Key
|
Type
|
Description
|
|
1
|
Wonderful
|
Table
|
|
2
|
Wonderful
|
Data
|
|
3
|
Wonderful
|
Website
|
## `ProseTbody`
Included in **ProseTable** example.
## `ProseTd`
Included in **ProseTable** example.
## `ProseTh`
Included in **ProseTable** example.
## `ProseThead`
Included in **ProseTable** example.
## `ProseTr`
Included in **ProseTable** example.
Checkout the source code for these components on GitHub.
---
- [Source](https://github.com/nuxt-modules/mdc/tree/main/src/runtime/components/prose)
## Sitemap
See the full [sitemap](https://content.nuxt.com/sitemap.md) for all pages.