Headers and Text
Headings, paragraphs, text formatting, and links with enhanced prose styling.
Text content forms the foundation of any documentation. Nuxt UI provides beautifully styled prose components that automatically enhance your markdown headings, paragraphs, and text formatting for optimal readability and consistent typography.
Headings
Use headings to structure your documentation and help users navigate content.
Headings H1 through H3 create anchors and show up automatically in the table of contents. You can disable them by setting
content.renderer.anchorLinks: false in your nuxt.config.ts (this is helpful for AI chat applications for example).Main Heading (h1)
The primary title for your page or section. Typically used once per page.
Nuxt UI
# Nuxt UI
app.config.ts
export default defineAppConfig({
ui: {
prose: {
h1: {
slots: {
base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
link: 'inline-flex items-center gap-2'
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
h1: {
slots: {
base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
link: 'inline-flex items-center gap-2'
}
}
}
}
})
]
})
Section Heading (h2)
Secondary headings that divide your content into major sections.
## What's new in v4?
app.config.ts
export default defineAppConfig({
ui: {
prose: {
h2: {
slots: {
base: [
'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
'[&>a>code]:transition-colors'
],
leading: [
'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted',
'transition'
],
leadingIcon: 'size-4 shrink-0',
link: 'group lg:ps-2 lg:-ms-2'
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
h2: {
slots: {
base: [
'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
'[&>a>code]:transition-colors'
],
leading: [
'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted',
'transition'
],
leadingIcon: 'size-4 shrink-0',
link: 'group lg:ps-2 lg:-ms-2'
}
}
}
}
})
]
})
Subsection Heading (h3)
Subsection headings for organizing content within major sections.
### Enhanced Components
app.config.ts
export default defineAppConfig({
ui: {
prose: {
h3: {
slots: {
base: [
'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
'[&>a>code]:transition-colors'
],
leading: [
'absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted',
'transition'
],
leadingIcon: 'size-4 shrink-0',
link: 'group lg:ps-2 lg:-ms-2'
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
h3: {
slots: {
base: [
'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
'[&>a>code]:transition-colors'
],
leading: [
'absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted',
'transition'
],
leadingIcon: 'size-4 shrink-0',
link: 'group lg:ps-2 lg:-ms-2'
}
}
}
}
})
]
})
Minor Heading (h4)
Minor headings for detailed organization within subsections.
#### Getting Started
app.config.ts
export default defineAppConfig({
ui: {
prose: {
h4: {
slots: {
base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary',
link: ''
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
h4: {
slots: {
base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary',
link: ''
}
}
}
}
})
]
})
Paragraphs
Standard paragraph text with proper spacing and line height for optimal readability.
Nuxt UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.
Nuxt UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.
app.config.ts
export default defineAppConfig({
ui: {
prose: {
p: {
base: 'my-5 leading-7 text-pretty'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
p: {
base: 'my-5 leading-7 text-pretty'
}
}
}
})
]
})
Links
To create a link, wrap the link text in brackets followed by the URL in parentheses. Works for both external and internal links.
[Nuxt documentation](https://nuxt.com)
app.config.ts
export default defineAppConfig({
ui: {
prose: {
a: {
base: [
'text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary',
'transition-colors [&>code]:transition-colors'
]
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
a: {
base: [
'text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary',
'transition-colors [&>code]:transition-colors'
]
}
}
}
})
]
})
Blockquotes
Use blockquotes to highlight important information or quotes.
Nuxt UI automatically adapts to your theme settings, ensuring consistent typography across your entire application.
> Nuxt UI automatically adapts to your theme settings, ensuring consistent typography across your entire application.
app.config.ts
export default defineAppConfig({
ui: {
prose: {
blockquote: {
base: 'border-s-4 border-accented ps-4 italic'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
blockquote: {
base: 'border-s-4 border-accented ps-4 italic'
}
}
}
})
]
})
Horizontal Rules
Use horizontal rules to visually separate content sections.
---
app.config.ts
export default defineAppConfig({
ui: {
prose: {
hr: {
base: 'border-t border-default my-12'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
hr: {
base: 'border-t border-default my-12'
}
}
}
})
]
})