Headers and text

Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.

Headings

Use headings to organize your content and make it easier to read.

H1 to H3 headings get anchor links and show up in the table of contents for easy navigation.

You can control anchor links generation (for example, for AI chat interfaces) in your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    renderer: {
      anchorLinks: false
    }
  }
})

You can control behavior of toc generation in your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        toc: {
          depth: 3
        }
      }
    }
  }
})

Pohon UI

# Pohon UI

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the ProseHeadersAndText. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

Heading 2

What's new in v4?

## What's new in v4?

We use unocss-variants to customize the theme. Read more about it in the theming guide.

app.config.ts

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

Heading 3

Enhanced components

### Enhanced components

We use unocss-variants to customize the theme. Read more about it in the theming guide.

app.config.ts

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

Heading 4

Getting started

#### Getting started

We use unocss-variants to customize the theme. Read more about it in the theming guide.

app.config.ts

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

Text formatting

Structure your content with clear paragraphs and consistent text formatting for better readability.

Paragraph

Pohon UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.

Pohon UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.

We use unocss-variants to customize the theme. Read more about it in the theming guide.

app.config.ts

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

Strong

Strong text

**Strong text**

We use unocss-variants to customize the theme. Read more about it in the theming guide.

app.config.ts

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

Emphasis

Emphasized text

*Emphasized text*

We use unocss-variants to customize the theme. Read more about it in the theming guide.

app.config.ts

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

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

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

We use unocss-variants to customize the theme. Read more about it in the theming guide.

app.config.ts

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

Blockquotes

Use blockquotes to highlight important information or quotes.

Pohon UI automatically adapts to your theme settings, ensuring consistent typography across your entire application.

> Pohon UI automatically adapts to your theme settings, ensuring consistent typography across your entire application.

We use unocss-variants to customize the theme. Read more about it in the theming guide.

app.config.ts

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

Horizontal rules

Use horizontal rules to visually separate content sections.

---

We use unocss-variants to customize the theme. Read more about it in the theming guide.

app.config.ts

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    prose: {
      headersAndText: {}
    }
  }
};

Introduction

Beautiful typography components and utilities to style your content with Pohon UI.

Lists and tables

Organize information with styled lists and responsive tables for clear, consistent readability.