gradient text

Text 13

About

A stylish gradient text component for modern UIs, built with accessibility and animation in mind.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds gradient text to your project and fits it to your theme.

Code

How gradient text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react";
import GradientText from "@/components/ui/gradient-text";

const GradientTextDemo = () => {
  return (
    <div className="p-10">
      <GradientText
        colors={["#3ca2fa", "#80eeb4", "#3ca2fa", "#80eeb4", "#3ca2fa"]}
        animationSpeed={3}
        showBorder={false}
        className="text-6xl font-black"
      >
        Welcome to Nur/ui
      </GradientText>
    </div>
  );
};

export default GradientTextDemo;