effects

Gradient Text

A server component that renders text with an animated gradient fill using CSS background-clip. The gradient cycles between --primary and --accent via a pure CSS keyframe animation. Self-contained: no JavaScript required.

Bottega

Install

1. Register the namespace (once per project):

json

// components.json — register the @bottega namespace once
{
  "registries": {
    "@bottega": { "url": "https://bottega.ariacode.ca/r/{name}.json" }
  }
}

2. Add the component:

bash

npx shadcn add @bottega/gradient-text

Usage

Usagetsx

<GradientText />

Props

Standard props — see source.

Source

gradient-text.tsxtsx

import type React from "react";
import styles from "./gradient-text.module.css";

export type GradientTextProps = React.HTMLAttributes<HTMLSpanElement>;

export function GradientText({ children, className = "", ...props }: GradientTextProps) {
  return (
    <span
      className={[styles.gradientText, className].filter(Boolean).join(" ")}
      {...props}
    >
      {children}
    </span>
  );
}

Dependencies

@bottega/tokens