Typography

Nuxt UI Pro provides beautiful typography components and utilities to style your content.

Usage

When using Nuxt UI Pro v3 with Nuxt Content v3, you get access to a set of pre-styled prose components.

Automatically when using the <ContentRenderer> component, your markdown content will be automatically styled.

You can follow @nuxt/content installation guide to get started.

Prose Components

Prose components are replacements for HTML typography tags introduced by the @nuxtjs/mdc module, Nuxt UI Pro overrides each one to provide a consistent look and feel.

You can learn more about Prose components in the Nuxt Content documentation.
You can use the prose components directly in your templates using the Prose prefix.
<template>
  <ProseTable>
    <ProseThead>
      <ProseTr>
        <ProseTh>Prop</ProseTh>
        <ProseTh>Default</ProseTh>
      </ProseTr>
    </ProseThead>
    <ProseTbody>
      <ProseTr>
        <ProseTd>
          <ProseCode>color</ProseCode>
        </ProseTd>
        <ProseTd>
          <ProseCode>neutral</ProseCode>
        </ProseTd>
      </ProseTr>
    </ProseTbody>
  </ProseTable>
</template>

h1

Nuxt UI

# Nuxt UI

h2

What's new in v3?

## What's new in v3?

h3

Tailwind CSS v4

### Tailwind CSS v4

h4

Install Nuxt UI

#### Install Nuxt UI

p

Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.

Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.

a

Nuxt documentation

[Nuxt documentation](https://nuxt.com)

blockquote

While Nuxt UI is free and open source, Nuxt UI Pro is a premium product that helps sustain Nuxt OSS development, check out the License section to learn more.

> While Nuxt UI is free and open source, Nuxt UI Pro is a premium product that helps sustain Nuxt OSS development, check out the License section to learn more.

strong

Strong text

**Strong text**

em

Emphasized text

*Emphasized text*

ul

  • I'm a list item.
  • I'm another list item.
  • I'm the last list item.
- I'm a list item.
- I'm another list item.
- I'm the last list item.

ol

  1. I'm a list item.
  2. I'm another list item.
  3. I'm the last list item.
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.

hr

---

table

PropDefaultType
namestring
sizemdstring
colorneutralstring
| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

img

Nuxt Social Image

![Nuxt Social Image](https://nuxt.com/new-social.jpg)
If @nuxt/image is installed, the <NuxtImg> component will be used instead of the native img tag.
Prop Default Type
src

string

alt

string

width

string | number

height

string | number

code

inline code

`inline code`

You can use the color prop to specify the color of the code block. Defaults to neutral.

inline code

`inline code`{color="error"}

You can use the lang prop to specify the language of the code block.

nuxt.config.ts

`nuxt.config.ts`{lang="ts-type"}
Prop Default Type
lang

string

color

'neutral'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

pre

Code-blocks are rendered by the ProsePre component of @nuxtjs/mdc and code highlighting is done underneath by Shiki.

By default for syntax highlighting, material-theme-lighter and material-theme-palenight VSCode themes are used for light & dark mode respectively. You can change this in your nuxt.config.ts through the content.build.markdown.highlight key.
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

```ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})
```

When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})
```
Some icons are already defined by default, but you can add more in your app.config.ts through the uiPro.prose.codeIcon key:
app.config.ts
export default defineAppConfig({
  uiPro: {
    prose: {
      codeIcon: {
        terminal: 'i-ph-terminal-window-duotone'
      }
    }
  }
})

Every code-block has a built-in copy button that will copy the code to your clipboard.

You can change the icon in your app.config.ts through the ui.icons.copy and ui.icons.copyCheck keys:
app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})
Prop Default Type
icon

string

code

string

language

string

filename

string

highlights

number[]

hideHeader

boolean

meta

string

ui

Partial<{ root: string; header: string; filename: string; icon: string; copy: string; base: string; }>

Vue Components

Nuxt UI Pro also provides a set of Vue components to help you write your content using the MDC syntax.

Accordion

Use the accordion and accordion-item components to display an Accordion in your content.

::accordion

::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"}
The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
::

::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"}
Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation/vue) to get started.
::

::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"}
We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components.
::

::
Prop Default Type
type

'multiple'

"multiple" | "single"

Badge

Use markdown in the default slot of the badge component to display a Badge in your content.

v3.0.0-alpha.10
::badge
**v3.0.0-alpha.10**
::

Callout

Use markdown in the default slot of the callout component to add eye-catching context to your content.

Use the icon and color props to customize it. You can also pass any property from the <NuxtLink> component.

Learn how to install @nuxt/ui-pro in your project.
::callout{icon="i-lucide-square-play" color="neutral" to="/getting-started/installation/pro/nuxt"}
This is a `callout` with full **markdown** support.
::

You can also use the note, tip, warning and caution shortcuts with pre-defined icons and colors.

Here's some additional information for you.
Here's a helpful suggestion.
Be careful with this action as it might have unexpected results.
This action cannot be undone.
::note
Here's some additional information.
::

::tip
Here's a helpful suggestion.
::

::warning
Be careful with this action as it might have unexpected results.
::

::caution
This action cannot be undone.
::

Card

Use markdown in the default slot of the card component to highlight your content.

Use the title, icon and color props to customize it. You can also pass any property from the <NuxtLink>.

Startup

Best suited for small teams, startups and agencies with up to 5 developers.

::card{title="Startup" icon="i-lucide-users" color="primary" to="https://nuxt.lemonsqueezy.com" target="_blank"}
Best suited for small teams, startups and agencies with up to 5 developers.
::

CardGroup

Wrap your card components with the card-group component to group them together in a grid layout.

Dashboard

A dashboard with multi-column layout.

SaaS

A template with landing, pricing, docs and blog.

Docs

A documentation with @nuxt/content.

Landing

A landing page you can use as starting point.

::card-group

::card
---
title: Dashboard
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/dashboard
target: _blank
---
A dashboard with multi-column layout.
::

::card
---
title: SaaS
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/saas
target: _blank
---
A template with landing, pricing, docs and blog.
::

::card
---
title: Docs
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/docs
target: _blank
---
A documentation with `@nuxt/content`.
::

::card
---
title: Landing
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-pro/landing
target: _blank
---
A landing page you can use as starting point.
::

::
app.config.ts
export default defineAppConfig({
  uiPro: {
    prose: {
      cardGroup: {
        base: 'grid sm:grid-cols-2 gap-5'
      }
    }
  }
})
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({
      uiPro: {
        prose: {
          cardGroup: {
            base: 'grid sm:grid-cols-2 gap-5'
          }
        }
      }
    })
  ]
})

CodeCollapse

Wrap your code-block with a code-collapse component to display a collapsible code block.

main.css
@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

::code-collapse

```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}
```

::
Prop Default Type
open

boolean

icon

appConfig.ui.icons.chevronDown

string

The icon displayed to toggle the code.

name

'code'

string

The name displayed in the trigger label.

openText

'Expand'

string

The text displayed when the code is collapsed.

closeText

'Collapse'

string

The text displayed when the code is expanded.

ui

PartialString<{ root: string; footer: string; trigger: string; triggerIcon: string; }>

CodeGroup

Wrap your code-blocks around a code-group component to group them together in tabs.

pnpm add @nuxt/ui-pro@next

::code-group

```bash [pnpm]
pnpm add @nuxt/ui-pro@next
```

```bash [yarn]
yarn add @nuxt/ui-pro@next
```

```bash [npm]
npm install @nuxt/ui-pro@next
```

```bash [bun]
bun add @nuxt/ui-pro@next
```

::
Like the ProsePre component, the CodeGroup handles filenames, icons and copy button.
Prop Default Type
modelValue

string

defaultValue

'0'

string

The default tab to select.

sync

string

Sync the selected tab with a local storage key.

ui

PartialString<{ root: string; list: string; indicator: string; trigger: string[]; triggerIcon: string; triggerLabel: string; }>

CodePreview

Wrap a code-block with the code-preview component to display a preview of an MDC component and its code using the code slot.

inline code

`inline code`

::code-preview
`inline code`

#code
```mdc
`inline code`
```
::
Prop Default Type
ui

Partial<{ root: string; preview: string; code: string; }>

CodeTree

Wrap your code-blocks with a code-tree component in any particular order to display a tree view of your files.

app/app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
})

::code-tree{defaultValue="app/app.config.ts"}

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],

  future: {
    compatibilityVersion: 4
  },

  css: ['~/assets/css/main.css']
})

```

```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
```

```ts [app/app.config.ts]
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
})
```

```vue [app/app.vue]
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
```

```json [package.json]
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "typecheck": "nuxt typecheck"
  },
  "dependencies": {
    "@iconify-json/lucide": "^1.2.18",
    "@nuxt/ui-pro": "3.0.0-alpha.10",
    "nuxt": "^3.15.1"
  },
  "devDependencies": {
    "typescript": "^5.7.2",
    "vue-tsc": "^2.2.0"
  }
}
```

```json [tsconfig.json]
{
  "extends": "./.nuxt/tsconfig.json"
}
```

````md [README.md]
# Nuxt 3 Minimal Starter

Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

Start the development server on `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
````

::
Like the ProsePre component, the CodeTree handles filenames, icons and copy button.
Prop Default Type
defaultValue

string

The default path to select.

ui

Partial<{ root: string; list: string; item: string; listWithChildren: string; itemWithChildren: string; link: string; linkLeadingIcon: string; linkLabel: string; linkTrailing: string; linkTrailingIcon: string; content: string; }>

Collapsible

Wrap your content with the collapsible component to display a Collapsible in your content.

::collapsible

| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

::
Prop Default Type
icon

appConfig.ui.icons.chevronDown

string

The icon displayed to toggle the collapsible.

name

'properties'

string

The name displayed in the trigger label.

openText

'Show'

string

The text displayed when the collapsible is open.

closeText

'Hide'

string

The text displayed when the collapsible is closed.

ui

PartialString<{ base: string; trigger: string[]; triggerIcon: string; triggerLabel: string; }>

Icon

Use the icon component to display an Icon in your content.

:icon{name="i-simple-icons-nuxtdotjs"}
Prop Default Type
name

string

Kbd

Use the kbd component to display a Kbd in your content.

K

:kbd{value="meta"} :kbd{value="K"}
Prop Default Type
value

string

Tabs

Use the tabs and tabs-item components to display Tabs in your content.

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

::tabs

:::tabs-item{label="Code" icon="i-lucide-code"}

```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
```

:::

:::tabs-item{label="Preview" icon="i-lucide-eye"}

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

:::

::
Prop Default Type
modelValue

string

defaultValue

'0'

string

The default tab to select.

sync

string

Sync the selected tab with a local storage key.

hash

string

The hash to scroll to when the tab is selected.

Steps

Wrap your headings with the Steps component to display a list of steps.

Use the level prop to define which heading will be used for the steps.

Add the Nuxt UI Pro module in your nuxt.config.ts

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

Import Tailwind CSS and Nuxt UI Pro in your CSS

assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui-pro";

::steps{level="4"}

#### Add the Nuxt UI Pro module in your `nuxt.config.ts`{lang="ts-type"}

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})
```

#### Import Tailwind CSS and Nuxt UI Pro in your CSS

```css [assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
```

::
Prop Default Type
level

'3'

"2" | "3" | "4"

Internationalization (i18n)

Learn how to internationalize your Nuxt app with multi-directional support (LTR/RTL).

defineShortcuts

A composable to define keyboard shortcuts in your app.