Gradient Text

Text with an animated shifting gradient color.

npx arupui add gradient-text

Preview

Gradient Text Effect

Usage

gradient-text.tsx

import { GradientText } from "@/components/blocks/gradient-text"

<GradientText className="text-4xl font-bold">
  Beautiful Gradient
</GradientText>

Prop	Type	Default
`colors`	string[]	["#7c3aed", "#2563eb", "#06b6d4", "#10b981"]
`animationSpeed`	number	4

colors

Type: string[]Default: ["#7c3aed", "#2563eb", "#06b6d4", "#10b981"]

animationSpeed

Type: numberDefault: 4