GradientText
A text component that displays text with gradient colors. Supports customizable gradients with multiple colors, different angles, and animated transitions (web only).
Source
LLM docs
Package
Examples
4
Properties
64
Playground
Basics
Pass two or more
colors to fill text with a gradient. All other Text props still apply.Loading demo…
import { GradientText } from '@plocks/ui';
export function Demo() {
return (
<GradientText colors={['#FF0080', '#7928CA']}>
Hello World
</GradientText>
);
}Angles
Different gradient directions using the
angle prop.Loading demo…
import { Block, GradientText } from '@plocks/ui';
const angles = [0, 45, 90, 135];
export function Demo() {
return (
<Block gap="md">
{angles.map((angle) => (
<GradientText key={angle} colors={['#FF0080', '#7928CA']} angle={angle} size="lg">
{angle}° gradient
</GradientText>
))}
</Block>
);
}Variants
The text variant changes the semantic element while keeping the gradient fill.
Loading demo…
import { Column, GradientText, Text } from '@plocks/ui';
const variants = ['h3', 'p', 'strong'] as const;
export function Demo() {
return (
<Column gap="md">
{variants.map(variant => (
<Column key={variant} gap="xs">
<Text size="xs" c="secondary">{variant}</Text>
<GradientText variant={variant} colors={['#FF0080', '#7928CA']}>
Gradient text with semantic markup
</GradientText>
</Column>
))}
</Column>
);
}Controlled
Control the gradient position manually using the
position prop (0.0 to 1.0).Loading demo…
import { useState } from 'react';
import { Block, GradientText, Slider } from '@plocks/ui';
export function Demo() {
const [position, setPosition] = useState(0);
return (
<Block>
<GradientText
value="Controlled Gradient"
position={position}
colors={['#ff76ba', '#FF0080', '#7928CA', '#4F46E5']}
size="3xl"
/>
<Slider
value={position}
onChange={setPosition}
min={0}
max={1}
step={0.01}
/>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources