Typography

Gradient Heading

Gradient text heading for React and shadcn/ui with CVA variants for color, size, and weight, plus asChild, for hero headlines.

Updated Oct 1, 2026

Variant: default

Heading - lg

Heading - xl

Heading - xxl

Heading - xxxl

Variant: pink

Heading - lg

Heading - xl

Heading - xxl

Heading - xxxl

Variant: light

Heading - lg

Heading - xl

Heading - xxl

Heading - xxxl

GradientHeading is a React heading component for shadcn/ui built with bg-clip-text and class-variance-authority. Use it for landing page headlines, section titles, and marketing page hero copy.

Installation


pnpm dlx shadcn@latest add @cult-ui/gradient-heading

Usage


export default function GradientHeadingExample() {
  return (
    <GradientHeading variant="default" size="lg" weight="bold">
      Like and subscribe
    </GradientHeading>
  );
}