Nuxt UI Prose Components Reference Guide

::callout
This is a default note callout.
::

::callout{icon="i-lucide-lightbulb"}
This callout has a custom lightbulb icon.
::

::callout{icon="i-lucide-alert-triangle" color="warning"}
**Warning:** This is an important warning message.
::

::callout{icon="i-lucide-x-circle" color="error"}
**Error:** Something went wrong!
::

::callout{icon="i-lucide-check-circle" color="note"}
**Success:** Operation completed successfully.
::

::callout{icon="i-lucide-info" color="info"}
**Info:** Here's some helpful information.
::

```javascript
const greeting = "Hello, World!";
console.log(greeting);
```

const greeting = "Hello, World!";
console.log(greeting);

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

```vue{3,5-7}
<template>
  <div>
    <h1>Highlighted Line</h1>
    <p>Normal line</p>
    <p>Highlighted</p>
    <p>Highlighted</p>
    <p>Highlighted</p>
  </div>
</template>
```

<template>
  <div>
    <h1>Highlighted Line</h1>
    <p>Normal line</p>
    <p>Highlighted</p>
    <p>Highlighted</p>
    <p>Highlighted</p>
  </div>
</template>

::code-group
```bash [npm]
npm install @nuxt/content
```
```bash [pnpm]
pnpm add @nuxt/content
```
```bash [yarn]
yarn add @nuxt/content
```
::

::card
---
title: Card Title
---
This is the card content. You can add any markdown here.
::

::card
---
title: Features
icon: i-lucide-sparkles
---
Discover all the amazing features.
::

::card-group
  ::card
  ---
  title: Documentation
  icon: i-lucide-book-open
  to: https://content.nuxt.com
  target: _blank
  ---
  Read the full documentation.
  ::
  ::card
  ---
  title: Examples
  icon: i-lucide-code
  to: https://content.nuxt.com/templates
  target: _blank
  ---
  Browse example projects.
  ::
  ::card
  ---
  title: GitHub
  icon: i-lucide-github
  to: https://github.com/nuxt/content
  target: _blank
  ---
  View source code.
  ::
::

::collapsible
---
title: Click to expand
---
This content is hidden by default and reveals when clicked.
::

::field
---
name: email
type: string
required: true
---
The user's email address.
::

::field-group
  ::field
  ---
  name: username
  type: string
  required: true
  ---
  The unique username.
  ::
  ::field
  ---
  name: password
  type: string
  required: true
  ---
  The user password.
  ::
::

::tabs
  ::div
  ---
  label: Tab 1
  icon: i-lucide-home
  ---
  Content for the first tab.
  ::
  ::div
  ---
  label: Tab 2
  icon: i-lucide-settings
  ---
  Content for the second tab.
  ::
::

:icon{name="i-lucide-heart"} Love this feature!

:icon{name="i-lucide-star" class="text-yellow-500"} Starred!

:badge[New]{variant="solid" color="info"}
:badge[Beta]{variant="outline" color="warning"}
:badge[Deprecated]{variant="soft" color="error"}

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

**Bold text**
*Italic text*
~~Strikethrough~~
`inline code`

> This is a blockquote.
> It can span multiple lines.

- Unordered item 1
- Unordered item 2
  - Nested item

1. Ordered item 1
2. Ordered item 2

| Feature | Status |
|---------|--------|
| SSR | ✅ |
| SSG | ✅ |
| ISR | ✅ |

[External Link](https://nuxt.com)
[Internal Link](/about)

![Alt text](/path/to/image.jpg)