The GradientText component paints a line of text with a colour ramp that travels across it on a loop, so a headline word carries the accent colour as movement rather than as a flat fill.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/gradient-text.jsonEverything Gradient Text accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| text (required) | string | No default | The text to paint |
| from | string | 'var(--brand)' | First and last stop of the gradient. Any CSS colour |
| via | string | 'var(--accent-pink)' | Middle stop — the colour that travels across the text |
| duration | number | 4 | Seconds for one pass of the gradient |
| className | string | '' | Additional CSS classes for styling |
Required.