Component

Gradient Text

Applies an animated gradient clipped to the glyphs. The sweep is a pure CSS background-position animation, and the text stays fully selectable and readable by assistive tech.

Gradient in motion

Custom colors, your tempo

Installation

Registry CLI — copy the source straight into your project:

$pnpm dlx shadcn@latest add @stacklyui/gradient-text

Or install the package and import it:

$pnpm add @stacklyui/ui motion

Usage

Render as any element with as (defaults to span). Provide your own colors array or use the brand gradient. Set animate={false} for a static gradient.

Props

Prop	Type	Default	Description
`as`	`ElementType`	`"span"`	Element/tag to render (e.g. "h1", "p").
`colors`	`string[]`	—	Gradient stops. Defaults to the accent gradient.
`animate`	`boolean`	`true`	Animate the gradient sweep.
`duration`	`number`	`6`	Seconds for one sweep.