Naive UI Typography Components

Typography components for styled text content including headings, paragraphs, lists, and text elements.

When to Use

Use this component when:

Document content: Display structured text content
Headings: Create styled headings (h1-h6)
Text styling: Apply semantic text styles (strong, italic, code, etc.)
Lists: Create ordered and unordered lists
Blockquotes: Display quoted content

When to Invoke

Invoke this skill when:

User needs styled headings with prefix bars
User wants colored text with semantic types
User needs lists with text alignment
User wants blockquotes or code text
User needs to create document-style content

Features

Headings (H1-H6): Styled headings with optional prefix bar
Text Component: Colored, styled text with multiple options
Paragraphs: Styled paragraph content
Lists: Ordered and unordered lists with alignment
Blockquote: Quoted content styling
Link (A): Styled anchor links
Horizontal Rule: Styled dividers

API Reference

Text Props

Name	Type	Default	Description
type	`'default' \| 'success' \| 'info' \| 'warning' \| 'error'`	`'default'`	Text type/color.
strong	`boolean`	`false`	Bold text.
italic	`boolean`	`false`	Italic text.
underline	`boolean`	`false`	Underlined text.
delete	`boolean`	`false`	Strikethrough text.
code	`boolean`	`false`	Code style text.
depth	`1 \| 2 \| 3 \| '1' \| '2' \| '3'`	`undefined`	Text shade depth.
tag	`string`	`undefined`	Custom HTML tag.

P Props

Name	Type	Default	Description
depth	`1 \| 2 \| 3 \| '1' \| '2' \| '3'`	`undefined`	Text depth.

H1, H2, H3, H4, H5, H6 Props

Name	Type	Default	Description
align-text	`boolean`	`false`	Text alignment.
type	`'default' \| 'success' \| 'info' \| 'warning' \| 'error'`	`'default'`	Heading color.
prefix	`'bar'`	`undefined`	Show prefix bar.

Ul, Ol Props

Name	Type	Default	Description
align-text	`boolean`	`false`	Text alignment.

Blockquote Props

Name	Type	Default	Description
align-text	`boolean`	`false`	Text alignment.

All Typography Slots

Name	Parameters	Description
default	`()`	Content of the component.

Basic Usage

Headings with Prefix Bar

<template>
  <n-h1 prefix="bar" align-text>
    <n-text type="primary">Primary Heading</n-text>
  </n-h1>
  <n-h2 prefix="bar" align-text>Heading 2</n-h2>
  <n-h3 prefix="bar" align-text>Heading 3</n-h3>
</template>

Colored Headings

<template>
  <n-h1 prefix="bar" align-text type="success">
    <n-text type="success">Success</n-text>
  </n-h1>
  <n-h1 prefix="bar" align-text type="info">
    <n-text type="info">Info</n-text>
  </n-h1>
  <n-h1 prefix="bar" align-text type="warning">
    <n-text type="warning">Warning</n-text>
  </n-h1>
  <n-h1 prefix="bar" align-text type="error">
    <n-text type="error">Error</n-text>
  </n-h1>
</template>

Text Styles

<template>
  <n-text type="info">Info</n-text>
  <n-text type="success">Success</n-text>
  <n-text type="warning">Warning</n-text>
  <n-text type="error">Error</n-text>
  <n-text strong>Strong</n-text>
  <n-text italic>Italic</n-text>
  <n-text underline>Underline</n-text>
  <n-text delete>Delete</n-text>
  <n-text code>Code</n-text>
</template>

Text Depth

<template>
  <n-text depth="1">Primary Depth</n-text>
  <n-text depth="2">Secondary Depth</n-text>
  <n-text depth="3">Tertiary Depth</n-text>
</template>

Lists

<template>
  <n-ul>
    <n-li>Unordered item 1</n-li>
    <n-li>Unordered item 2</n-li>
    <n-li>Unordered item 3</n-li>
  </n-ul>
  <n-ol>
    <n-li>Ordered item 1</n-li>
    <n-li>Ordered item 2</n-li>
    <n-li>Ordered item 3</n-li>
  </n-ol>
</template>

Blockquote

<template>
  <n-blockquote>
    Hear the Wind Sing is the first novel by Japanese writer Haruki Murakami.
  </n-blockquote>
  <n-blockquote align-text>
    Aligned blockquote content.
  </n-blockquote>
</template>

Links

<template>
  <n-a href="https://example.com" target="_blank">
    External Link
  </n-a>
</template>

Common Patterns

Document Structure

<template>
  <n-h1 prefix="bar" align-text>Document Title</n-h1>
  <n-p>
    Introduction paragraph with some 
    <n-text strong>important</n-text> text.
  </n-p>
  <n-h2 prefix="bar" align-text>Section 1</n-h2>
  <n-p>Section content...</n-p>
  <n-h3>Subsection</n-h3>
  <n-ul>
    <n-li>Point 1</n-li>
    <n-li>Point 2</n-li>
  </n-ul>
  <n-hr />
  <n-h2 prefix="bar" align-text>Section 2</n-h2>
  <n-blockquote>
    A notable quote from the document.
  </n-blockquote>
</template>

Router Link Integration

<template>
  <router-link to="/" #="{ navigate, href }" custom>
    <n-a :href="href" @click="navigate">
      Back Home
    </n-a>
  </router-link>
</template>

Status Messages

<template>
  <n-space vertical>
    <n-text type="success">✓ Operation completed successfully</n-text>
    <n-text type="warning">⚠ Please review your input</n-text>
    <n-text type="error">✗ An error occurred</n-text>
    <n-text type="info">ℹ Additional information</n-text>
  </n-space>
</template>

Code Display

<template>
  <n-p>
    Use the <n-text code>npm install</n-text> command to install dependencies.
  </n-p>
  <n-p>
    The <n-text code delete>deprecated</n-text> method should not be used.
  </n-p>
</template>

Custom Tag

<template>
  <n-text tag="div" type="primary">
    Text rendered as a div element
  </n-text>
</template>

Combined Styles

<template>
  <n-text strong italic type="primary">
    Bold italic primary text
  </n-text>
  <n-text code type="error">
    Error code snippet
  </n-text>
</template>

Best Practices

Use semantic headings: Use appropriate heading levels (h1-h6) for hierarchy

<n-h1>Main Title</n-h1>
<n-h2>Section Title</n-h2>
<n-h3>Subsection Title</n-h3>

Apply prefix bar for emphasis: Use prefix="bar" for visual hierarchy
```
<n-h1 prefix="bar" align-text>Important Section</n-h1>
```

Use text types semantically: Match type to content meaning

<n-text type="success">Success message</n-text>
<n-text type="error">Error message</n-text>

Align text consistently: Use align-text for consistent spacing
```
<n-ul align-text>
  <n-li>Aligned list item</n-li>
</n-ul>
```
Combine text styles appropriately: Use multiple props for combined effects
```
<n-text strong code>Important code</n-text>
```
Use depth for visual hierarchy: Apply depth for secondary content
```
<n-text depth="3">Secondary information</n-text>
```
Use n-a for navigation: Integrate with router-link for SPA navigation

n-typography

SKILL.mdcomponents/n-typography/SKILL.md