Components
GradientText
Gradient-filled text for premium headings, with an optional animated sweep.
GradientText fills text with a gradient using background-clip: text, so it
inherits the font size of whatever element it renders as — set as to a heading
(h1, h2, …) and size it with your own classes. Pass animate to make the
gradient sweep continuously (automatically disabled under reduced motion), or
override the default accent → info sweep with a custom CSS gradient string. Use
it sparingly for hero headlines and accent words.
Example
Preview
Officina Admin
Premium by default
import { GradientText } from '@officina/ui';
<GradientText as="h1" animate className="text-4xl">
Build faster
</GradientText>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| animate | boolean | false | Animate the gradient sweep. Disabled automatically under reduced motion. |
| as | ElementType | — | Render as a different element (e.g. `h1`, `h2`). |
| gradient | string | linear-gradient(90deg, var(--color-accent), var(--color-info), var(--color-accent)) | Override the gradient. Defaults to an accent → info token sweep. |