N Typography

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

P Props

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

Ul, Ol Props

Blockquote Props

All Typography Slots

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

1. 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>
   

2. Apply prefix bar for emphasis: Use prefix="bar" for visual hierarchy

   <n-h1 prefix="bar" align-text>Important Section</n-h1>
   

3. 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>
   

4. Align text consistently: Use align-text for consistent spacing

   <n-ul align-text>
     <n-li>Aligned list item</n-li>
   </n-ul>
   

5. Combine text styles appropriately: Use multiple props for combined effects

   <n-text strong code>Important code</n-text>
   

6. Use depth for visual hierarchy: Apply depth for secondary content

   <n-text depth="3">Secondary information</n-text>
   

7. Use n-a for navigation: Integrate with router-link for SPA navigation