N Gradient Text

Naive UI Gradient Text Component

Text component with gradient color styling for decorative purposes.

When to Use

Use this component when:

• Decorative headings: Create visually appealing gradient headings
• Brand styling: Apply brand gradient colors to text
• Visual emphasis: Highlight important text with gradient effects
• Custom styling: Create unique text appearances with custom gradients

When to Invoke

Invoke this skill when:

• User needs gradient-colored text
• User wants predefined gradient text types
• User needs custom gradient colors
• User wants to style text with gradient effects

Features

• Preset Types: Primary, info, success, warning, error gradients
• Custom Gradients: Define custom gradient colors and angles
• Size Control: Set text size via prop or CSS
• Simple API: Easy-to-use gradient configuration

API Reference

GradientText Props

GradientText Slots

Basic Usage

Preset Types

<template>
  <n-gradient-text type="error">Boom!</n-gradient-text>
  <br>
  <n-gradient-text type="info">Emmm</n-gradient-text>
  <br>
  <n-gradient-text type="warning">Oops!</n-gradient-text>
  <br>
  <n-gradient-text type="success">Haha!</n-gradient-text>
</template>

Custom Size

<template>
  <n-gradient-text :size="24" type="warning">
    Married with Children
  </n-gradient-text>
  <br>
  <n-gradient-text :size="24" type="success">
    Back in the USSR
  </n-gradient-text>
</template>

Custom Gradient

<template>
  <n-gradient-text
    :gradient="{
      from: 'rgb(85, 85, 85)',
      to: 'rgb(170, 170, 170)',
    }"
  >
    Custom Color
  </n-gradient-text>
  <br>
  <n-gradient-text
    :gradient="{
      deg: 180,
      from: 'rgb(85, 85, 85)',
      to: 'rgb(170, 170, 170)',
    }"
  >
    Custom Color with Angle
  </n-gradient-text>
  <br>
  <n-gradient-text
    gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"
  >
    Multi-color Gradient
  </n-gradient-text>
</template>

Common Patterns

Gradient Heading

<template>
  <n-h1>
    <n-gradient-text type="primary" :size="32">
      Welcome to Our App
    </n-gradient-text>
  </n-h1>
</template>

Brand Colors

<template>
  <n-gradient-text
    :gradient="{
      from: '#667eea',
      to: '#764ba2',
      deg: 135
    }"
    :size="28"
  >
    Brand Name
  </n-gradient-text>
</template>

Status Indicators

<template>
  <n-space align="center">
    <n-gradient-text type="success" :size="16">
      ✓ Completed
    </n-gradient-text>
    <n-gradient-text type="warning" :size="16">
      ⚠ Pending
    </n-gradient-text>
    <n-gradient-text type="error" :size="16">
      ✗ Failed
    </n-gradient-text>
  </n-space>
</template>

Animated Gradient (CSS)

<template>
  <n-gradient-text
    :gradient="'linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ff6b6b)'"
    :size="24"
    class="animated-gradient"
  >
    Animated Text
  </n-gradient-text>
</template>

<style scoped>
.animated-gradient {
  background-size: 200% auto;
  animation: gradient 3s linear infinite;
}

@keyframes gradient {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
</style>

Rainbow Text

<template>
  <n-gradient-text
    gradient="linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)"
    :size="20"
  >
    Rainbow Text
  </n-gradient-text>
</template>

Best Practices

1. Use preset types for consistency: Stick to predefined types for standard UI

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

2. Match brand colors: Use custom gradients for brand-specific styling

   <n-gradient-text :gradient="{ from: '#brand1', to: '#brand2' }">
     Brand Text
   </n-gradient-text>
   

3. Consider readability: Ensure gradient colors maintain text readability

   • Avoid overly similar colors
   • Maintain sufficient contrast

4. Use sparingly: Gradient text is decorative, use for emphasis only

   • Don't overuse in body text
   • Reserve for headings and highlights

5. Size with context: Match text size to surrounding content

   <n-gradient-text :size="24" type="primary">Heading</n-gradient-text>
   

6. Combine with typography: Use within n-h1, n-h2, etc. for semantic structure

   <n-h2>
     <n-gradient-text type="info">Section Title</n-gradient-text>
   </n-h2>