Saasflare UI
Components

Gradient Text

Animated linear-gradient text fill via background-clip — for headlines and brand accents.

Installation

npx shadcn@latest add https://ui.saasflare.io/r/gradient-text.json
pnpm add @saasflare/ui

Usage

Loading…
"use client"import { GradientText } from "@saasflare/ui"/** Animated gradient fill applied inline to part of a headline. */export function Demo() {    return (        <div className="flex h-64 w-full items-center justify-center rounded-lg border bg-fd-card p-8">            <h2 className="text-3xl font-bold tracking-tight">                Build with <GradientText>Saasflare</GradientText>            </h2>        </div>    )}

Custom

Loading…
"use client"import { GradientText } from "@saasflare/ui"/** Supply custom color stops and a faster animation speed. */export function Demo() {    return (        <div className="flex h-64 w-full items-center justify-center rounded-lg border bg-fd-card p-8">            <GradientText                colors={["#ff6b6b", "#ffd93d", "#6bcb77"]}                speed={4}                className="text-3xl font-bold tracking-tight"            >                Ship your next big idea            </GradientText>        </div>    )}

API Reference

Prop

Type

On this page