# Gradient Heading

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

Source: https://www.cult-ui.com/docs/components/gradient-heading

## Example

```tsx title="gradient-heading-demo.tsx"
"use client"

import * as React from "react"

import { GradientHeading, Size, Variant, Weight } from "../ui/gradient-heading"

export default function GradientHeadingDemo() {
  const variants: Variant[] = ["default", "pink", "light"]
  const sizes: Size[] = ["lg", "xl", "xxl", "xxxl"]
  const weights: Weight[] = ["thin", "base", "semi", "bold", "black"]

  return (
    <div className="space-y-8 p-4">
      {variants.map((variant) => (
        <div key={variant}>
          <h2 className="mb-4 text-xl font-semibold">Variant: {variant}</h2>
          {sizes.map((size) => (
            <div key={size} className="mb-2">
              {weights.map((weight) => (
                <GradientHeading
                  key={`${variant}-${size}-${weight}`}
                  variant={variant}
                  size={size}
                  weight={weight}
                  className="mb-2"
                >
                  {`Heading - ${size}`}
                </GradientHeading>
              ))}
            </div>
          ))}
        </div>
      ))}
    </div>
  )
}
```

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

### CLI

```bash
npx shadcn@latest add @cult-ui/gradient-heading
```

### Manual

**Copy and paste the following code into your project.**

```tsx title="gradient-heading.tsx"
import React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const headingVariants = cva(
  "bg-clip-text pb-3 tracking-tight text-transparent",
  {
    variants: {
      variant: {
        default:
          "bg-gradient-to-t from-neutral-700 to-neutral-800 dark:from-stone-200 dark:to-neutral-200",
        pink: "from-accent to-accent/90 bg-gradient-to-t dark:from-stone-200 dark:to-neutral-200",
        light: "bg-gradient-to-t from-neutral-200 to-neutral-300",
        secondary:
          "bg-gradient-to-t from-neutral-500 to-neutral-600 dark:from-stone-200 dark:to-neutral-200",
      },
      size: {
        default: "text-2xl sm:text-3xl lg:text-4xl",
        xxs: "text-base sm:text-lg lg:text-lg",
        xs: "text-lg sm:text-xl lg:text-2xl",
        sm: "text-xl sm:text-2xl lg:text-3xl",
        md: "text-2xl sm:text-3xl lg:text-4xl",
        lg: "text-3xl sm:text-4xl lg:text-5xl",
        xl: "text-4xl sm:text-5xl lg:text-6xl",
        xll: "text-4xl sm:text-6xl lg:text-[5.4rem] lg:leading-[0.5rem]",
        xxl: "text-5xl sm:text-6xl lg:text-[6rem]",
        xxxl: "text-5xl sm:text-6xl lg:text-[8rem]",
      },
      weight: {
        default: "font-bold",
        thin: "font-thin",
        base: "font-base",
        semi: "font-semibold",
        bold: "font-bold",
        black: "font-black",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
      weight: "default",
    },
  }
)

export interface HeadingProps extends VariantProps<typeof headingVariants> {
  asChild?: boolean
  children: React.ReactNode
  className?: string
}

const GradientHeading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
  ({ asChild, variant, weight, size, className, children, ...props }, ref) => {
    const Comp = asChild ? Slot : "h3" // default to 'h3' if not a child
    return (
      <Comp ref={ref} {...props} className={className}>
        <span className={cn(headingVariants({ variant, size, weight }))}>
          {children}
        </span>
      </Comp>
    )
  }
)

GradientHeading.displayName = "GradientHeading"

// Manually define the variant types
export type Variant = "default" | "pink" | "light" | "secondary"
export type Size =
  | "default"
  | "xxs"
  | "xs"
  | "sm"
  | "md"
  | "lg"
  | "xl"
  | "xxl"
  | "xxxl"
export type Weight = "default" | "thin" | "base" | "semi" | "bold" | "black"

export { GradientHeading, headingVariants }
```

**Update the import paths to match your project setup.**

## Usage

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