Viora LogoViora UI
Login

Gradient Text

Animated gradient text with customizable colors and speed.

Gradient Animation

demo-gradient-text.tsx
Loading source code...

Installation

pnpm dlx viora-ui add gradient-text
npx viora-ui add gradient-text
yarn viora-ui add gradient-text
bunx --bun viora-ui add gradient-text

Usage

import { GradientText } from "viora-ui";
import { GradientText } from "viora-ui";

export default function GradientTextDemo() {
  return (
    <div className="flex min-h-[350px] w-full items-center justify-center p-6">
      <GradientText />
    </div>
  );
}

API Reference

GradientText

PropTypeDefaultDescription
childrenReactNode-Content or child elements to render.
className?string""Additional CSS classes for custom styling.
colors?string[][]Configuration for colors.
animationSpeed?number-Configuration for animationSpeed.
showBorder?booleanfalseConfiguration for showBorder.

Built by Otis

Last updated: 9/13/2026