Gradient Text

A customizable text component with gradient fill.

Preview

Gradient Text

Custom Colors

Sunset

Animated

Animated

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/gradient-text.json

Usage

tsx
9 lines
1
2
3
4
5
6
7
8
9
import { GradientText } from "@/components/ui/gradient-text";

export default function Example() {
  return (
    <GradientText className="text-4xl">
      Your Gradient Text
    </GradientText>
  );
}