Gradient Text

Installation

Examples

Props

Files installed (3)

• app/components/ui/gradient-text/GradientText.vue 2.6 kB

  <script setup lang="ts">
  import { computed } from 'vue'
  import type { HTMLAttributes } from 'vue'
  import { Primitive } from 'reka-ui'
  import { cn } from '@/lib/utils'
  import { gradientTextPresets, type GradientPreset } from './gradient-text.variants'
  
  type Direction =
    | 'to right'
    | 'to left'
    | 'to top'
    | 'to bottom'
    | 'to top right'
    | 'to top left'
    | 'to bottom right'
    | 'to bottom left'
  
  const props = withDefaults(
    defineProps<{
      /** Rendered element / component via Primitive. */
      as?: string
      asChild?: boolean
      /** Preset gradient name. Overrides from/to when set. */
      preset?: GradientPreset
      /** Start color of a custom two-stop gradient. */
      from?: string
      /** End color of a custom two-stop gradient. */
      to?: string
      /** Gradient direction. */
      direction?: Direction
      /** Fully custom CSS gradient (e.g. 'linear-gradient(45deg, #f00, #00f, #0f0)'). Overrides preset/from/to. */
      gradient?: string
      /** Animate the gradient (subtle background-position shift). */
      animated?: boolean
      /** Animation duration in seconds. Default 4. */
      animationDuration?: number
      class?: HTMLAttributes['class']
    }>(),
    {
      as: 'span',
      direction: 'to right',
      animated: false,
      animationDuration: 4,
    },
  )
  
  const gradientValue = computed(() => {
    if (props.gradient) return props.gradient
    if (props.preset) return gradientTextPresets[props.preset] ?? ''
    if (props.from && props.to) {
      return `linear-gradient(${props.direction}, ${props.from}, ${props.to})`
    }
    // Default fallback: primary token gradient.
    return 'linear-gradient(to right, var(--primary), var(--primary))'
  })
  
  const style = computed(() => ({
    backgroundImage: gradientValue.value,
    backgroundClip: 'text',
    WebkitBackgroundClip: 'text',
    color: 'transparent',
    WebkitTextFillColor: 'transparent',
    backgroundSize: props.animated ? '200% 200%' : undefined,
  }))
  </script>
  
  <template>
    <Primitive
      data-uipkge
      data-slot="gradient-text"
      :data-preset="preset"
      :data-animated="animated ? 'true' : undefined"
      :as="as"
      :as-child="asChild"
      :class="
        cn(
          'inline-block',
          animated ? `motion-safe:animate-[gradient-text-shift_${props.animationDuration}s_ease_infinite]` : '',
          props.class,
        )
      "
      :style="style"
    >
      <slot />
    </Primitive>
  </template>
  
  <style scoped>
  @media (prefers-reduced-motion: no-preference) {
    @keyframes gradient-text-shift {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
  }
  </style>

• app/components/ui/gradient-text/gradient-text.variants.ts 1.2 kB

  import type { VariantProps } from 'class-variance-authority'
  import { cva } from 'class-variance-authority'
  
  /**
   * Preset gradients keyed by name. Each value is a full CSS gradient string
   * applied as `background-image` with `background-clip: text`.
   */
  export const gradientTextPresets = {
    sunset: 'linear-gradient(to right, #ff7e5f, #feb47b)',
    ocean: 'linear-gradient(to right, #2193b0, #6dd5ed)',
    forest: 'linear-gradient(to right, #11998e, #38ef7d)',
    fire: 'linear-gradient(to right, #f12711, #f5af19)',
    candy: 'linear-gradient(to right, #f857a6, #ff8a5c)',
    aurora: 'linear-gradient(to right, #00c6ff, #0072ff, #00c6ff)',
    rainbow: 'linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3)',
    gold: 'linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c)',
    neon: 'linear-gradient(to right, #00f260, #0575e6)',
    grape: 'linear-gradient(to right, #6a11cb, #2575fc)',
  } as const
  
  export type GradientPreset = keyof typeof gradientTextPresets
  
  export const gradientTextVariants = cva('inline-block', {
    variants: {},
    defaultVariants: {},
  })
  
  export type GradientTextVariants = VariantProps<typeof gradientTextVariants>

• app/components/ui/gradient-text/index.ts 0.2 kB

  export { default as GradientText } from './GradientText.vue'
  export {
    gradientTextPresets,
    gradientTextVariants,
    type GradientPreset,
    type GradientTextVariants,
  } from './gradient-text.variants'

Raw manifest: https://uipkge.dev/r/vue/gradient-text.json