Browse components
Gradient Text
Text filled with a slowly flowing multi-stop gradient.
Gradient text
Installation
npx shadcn@latest add @glint-ui/gradient-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/gradient-text.json
Usage
import { GradientText } from "@/components/ui/gradient-text";
<GradientText text="Gradient text" colors={["#c6ff3d", "#22d3ee", "#c6ff3d"]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Gradient text" | Text to render. |
| colors | string[] | ["#c6ff3d","#22d3ee","#a78bfa","#c6ff3d"] | Gradient stops. Repeat the first color last for a seamless loop. |
| speed | number | 6 | Seconds per cycle. |
| className | string | — | Extra classes for the root element. |