Components
Neon Glow
Highly customizable neon glow text with single color, multi-color gradients (linear, radial, conic), and animated effects.
npx neonblade add neon-glowSingle color presets
cyanpinkgreenpurpleorangeyellow
Glow intensity
nonesubtlenormalstrongintense
Multi-color gradient — linear directions
left-rightright-lefttop-bottombottom-topdiagonal-tl-brdiagonal-tr-bl
Radial & conic gradients
RadialConic
Up to four colors
Four ColorsCustom Hex
Animated — animationType="shift" (linear gradient scrolls)
Shift · NormalShift · Fast
Animated — animationType="pulse" (opacity fades in/out)
Pulse · SlowConic Pulse
Gradient glow — halo matches the text gradient colors
Violet-Acid
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The text content to display with the neon glow effect. |
colors | "cyan" | "pink" | "green" | "purple" | "orange" | "yellow" | string | NGColor[] | "cyan" | Single color or an array of up to four colors. Accepts preset names or any valid CSS color string — hex ("#00f3ff"), rgb, hsl, etc. One color renders plain neon text; 2–4 colors produce a gradient. |
gradientDirection | "left-right" | "right-left" | "top-bottom" | "bottom-top" | "diagonal-tl-br" | "diagonal-tr-bl" | "radial" | "conic" | "left-right" | Direction of the gradient. Only relevant when colors contains more than one entry. |
glowIntensity | "none" | "subtle" | "normal" | "strong" | "intense" | "normal" | Intensity of the neon glow. Drives text-shadow for single-color text and filter: drop-shadow() for gradient text. |
glowColor | "cyan" | "pink" | "green" | "purple" | "orange" | "yellow" | string | - | Pin the glow to a specific color (preset name or any CSS color). For single-color text this defaults to the text color. For gradient text no glow is applied unless glowColor or gradientGlow is set. |
gradientGlow | boolean | false | When true and colors is multi-color, applies layered drop-shadow filters using each gradient color, producing a multi-hued halo that mirrors the text gradient. Takes precedence over glowColor for gradient text. |
animate | boolean | false | Enable animation. The animation type is controlled by animationType. Defaults to "shift" for linear gradients and "pulse" for everything else. |
animationType | "auto" | "shift" | "pulse" | "auto" | "auto" picks automatically: linear gradients use "shift" (scrolls background-position), all other cases use "pulse" (fades opacity). Set explicitly to force a specific animation regardless of gradient type. |
animationSpeed | "slow" | "normal" | "fast" | "normal" | Speed of the animation. "slow" = 6 s / 4 s, "normal" = 3 s / 2 s, "fast" = 1.5 s / 1 s (shift / pulse respectively). |
className | string | - | Additional Tailwind or custom CSS classes — use this for font size, weight, family, spacing, etc. |