Gradient Text Demo

PreviousNext

Demo showing an animated gradient text.

Docs
animate-uiui

Preview

Loading preview…
registry/demo/primitives/texts/gradient/index.tsx
import { GradientText } from '@/components/animate-ui/primitives/texts/gradient';

interface GradientTextDemoProps {
  neon: boolean;
}

export const GradientTextDemo = ({ neon }: GradientTextDemoProps) => {
  return (
    <GradientText
      className="text-4xl font-semibold"
      text="Gradient Text"
      neon={neon}
    />
  );
};

Installation

npx shadcn@latest add @animate-ui/demo-primitives-texts-gradient

Usage

import { DemoPrimitivesTextsGradient } from "@/components/ui/demo-primitives-texts-gradient"
<DemoPrimitivesTextsGradient />