Introducing Nuvyx UI v1.0.0

Docs
Lamp Heading

Lamp Heading

An elegant section heading with a customizable gradient underline and a subtle lamp-like glow effect and nice little animation.

Image Generation

AI Solutions

Data Analysis

Installation

Usage

import { LampHeading } from "@/components/ui/lamp-heading";
// Basic usage with default settings
<LampHeading text="Featured Products" />
 
// Custom styling with className
<LampHeading
  text="About Us"
  className="text-3xl font-bold tracking-tight"
/>
 
// Custom gradient colors
<LampHeading
  text="Our Services"
  gradientColors={{ from: "#8a2be2", to: "#ff8c00" }}
/>
 
// Modified glow effect
<LampHeading
  text="Portfolio"
  glowIntensity={0.9}
  glowSize={30}
  direction="above"
/>
 
// Fully customized example
<LampHeading
  text="Contact Us"
  className="text-4xl font-extrabold text-slate-800"
  gradientColors={{ from: "#06b6d4", to: "#3b82f6" }}
  lineHeight={3}
  glowIntensity={0.8}
  glowSize={25}
  direction="below"
/>

Props

PropTypeDefaultDescription
textstring""The text content of the heading
classNamestring""Additional CSS classes to apply for styling the heading, including text color, font size, and weight
gradientColorsobject{ from: "#ff3366", to: "#338ef7" }The gradient colors used for the underline. Object should include 'from' and 'to' color hex values
lineHeightnumber2The height of the underline in pixels
glowIntensitynumber0.7The intensity of the glow effect (0-1)
glowSizenumber20The size of the glow effect in pixels
directionstring"below"The direction of the glow effect (above or below)