Base
GradientText
GradientText applies a background-clip gradient to inline or block text, with a polymorphic `as` prop for headings.
Installation
npx shadcn add https://rck.vibeboxph.com//r/gradient-text.jsonLive preview & controls
Gradient text
Controls
<GradientText>Gradient text</GradientText>Anatomy
GradientTextThe root element (span by default, or any element via `as`).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| gradient | "rose" | "sunset" | "candy" | "mono" | rose | Gradient color stops. |
| weight | "normal" | "medium" | "semibold" | "bold" | semibold | Font weight. |
| size | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | md | Font size. |
| as | React.ElementType | span | Render as a different element, e.g. h1. |
Accessibility
- Gradient text can reduce contrast against busy backgrounds — verify contrast at the darkest stop against your page background.
- Since it renders real text (not an image), it remains selectable and readable by screen readers.
Source
registry/rck/ui/gradient-text.tsx
import * as React from "react";
import { cva, type VariantProps } from "@/lib/cva";
import { cn } from "@/lib/utils";
export const gradientTextVariants = cva("inline-block bg-clip-text text-transparent", {
variants: {
gradient: {
rose: "bg-gradient-to-r from-rose-600 via-rose-500 to-fuchsia-500",
sunset: "bg-gradient-to-r from-rose-500 via-orange-400 to-amber-400",
candy: "bg-gradient-to-r from-rose-500 via-pink-500 to-violet-500",
mono: "bg-gradient-to-r from-foreground to-muted-foreground",
},
weight: {
normal: "font-normal",
medium: "font-medium",
semibold: "font-semibold",
bold: "font-bold",
},
size: {
sm: "text-sm",
md: "text-base",
lg: "text-lg",
xl: "text-xl",
"2xl": "text-2xl",
"3xl": "text-3xl",
"4xl": "text-4xl",
},
},
defaultVariants: {
gradient: "rose",
weight: "semibold",
size: "md",
},
});
export interface GradientTextProps
extends
React.HTMLAttributes<HTMLSpanElement>,
VariantProps<typeof gradientTextVariants> {
/** Render as a different element, e.g. "h1" for hero headings. */
as?: React.ElementType;
}
export const GradientText = React.forwardRef<HTMLSpanElement, GradientTextProps>(
({ className, gradient, weight, size, as: Component = "span", ...props }, ref) => {
return (
<Component
ref={ref}
data-slot="gradient-text"
className={cn(gradientTextVariants({ gradient, weight, size }), className)}
{...props}
/>
);
},
);
GradientText.displayName = "GradientText";