Back
Gradient Text
Satu Visual ComponentNew
Text with an animated gradient that slides horizontally.
Satu Visual
Installation
Add it with the CLI:
Terminal
$
Or open the Code tab above and copy it in manually — it relies on the standard cn() helper from @/lib/utils.
Usage
Wrap any inline text. Pass Tailwind gradient stops via the `gradient` prop.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Text content. |
| className | string | — | Extra classes (e.g. text size). |
| gradient | string | from-indigo-500 via-purple-500 to-pink-500 | Tailwind gradient stops. |
Requirements
No external npm dependencies. ✨
Add this to your Tailwind config:
tailwind.config.ts
// tailwind.config.ts → theme.extend
animation: { "gradient-x": "gradient-x 4s ease infinite" },
keyframes: {
"gradient-x": {
"0%, 100%": { "background-position": "0% 50%" },
"50%": { "background-position": "100% 50%" },
},
},