Text Gradient

Display

Inline gradient text with optional animated flow and custom color stops.

Text Gradient — gradient text with optional animation

Kikito Design

Purple to Sky

Animated gradient flow

Instalação via CLI

$ npx kikitocn add text-gradient

Exemplo de uso

Text GradientExample.tsx

import { TextGradient } from "@/components/ui/cn/text-gradient/TextGradient";

export function TextGradientExample() {
  return (
    <TextGradient />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children*`	`React.ReactNode`	—	Texto com gradiente
`from`	`string`	—	Cor inicial do gradiente
`to`	`string`	—	Cor final do gradiente
`via`	`string`	—	Cor intermediária opcional
`direction`	`string`	`'to right'`	Direção CSS do gradiente
`animate`	`boolean`	`false`	Animar o fluxo do gradiente
`as`	`'span' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'p'`	`'span'`	Elemento HTML a renderizar
`className`	`string`	—	Classes CSS extras

Voltar para Display

Carregando…