Components

Outline Text

Outline-only text with customizable stroke color, fill, stroke width, per-letter proximity hover effect, color transitions, and neon glow.

npx neonblade add outline-text

Stroke color presets — transparent fill

cyanpinkgreenpurpleorangeyellow

Custom fill color

Dark fillTinted fillAlpha fill

Hover glow intensity (hover to see)

nonesubtlenormalstrongintense

Stroke width

0.5px1px1.5px2px3px

Stroke color change on hover

Cyan → PinkPurple → Yellow

Proximity radius effect — move cursor near letters

PROXIMITY

WIDE RADIUS

Whole-text hover (proximityEffect disabled)

Hover me

Headline showcase

NEONBLADE

Props Configuration

Prop	Type	Default	Description
`children`	`string`	-	The text string to render as outlined letters. Each character is wrapped individually to support per-letter proximity activation.
`strokeColor`	`"cyan" \| "pink" \| "green" \| "purple" \| "orange" \| "yellow" \| string`	`"cyan"`	Color of the letter outline/stroke in the default (non-hovered) state. Accepts preset names or any valid CSS color string — hex, rgb, hsl, etc.
`fillColor`	`string`	`"transparent"`	Fill color of the inner part of the letters. Use "transparent" for a pure outline-only look, or any CSS color string for a solid or semi-transparent fill.
`strokeWidth`	`number`	`1`	Thickness of the letter outline stroke in pixels.
`fontSize`	`string \| number`	`"3rem"`	Font size of the text. Accepts any valid CSS length value ("2rem", "48px", "clamp(2rem, 5vw, 5rem)") or a number treated as px.
`hoverStrokeColor`	`"cyan" \| "pink" \| "green" \| "purple" \| "orange" \| "yellow" \| string`	-	Stroke color in the hover / proximity-activated state. Defaults to strokeColor when not provided.
`hoverFillColor`	`string`	-	Fill color of the inner part of the letters in the hover / proximity-activated state. Defaults to fillColor.
`hoverGlowIntensity`	`"none" \| "subtle" \| "normal" \| "strong" \| "intense"`	`"normal"`	Intensity of the neon text-shadow glow applied to each letter when it is hover / proximity-activated.
`hoverGlowColor`	`"cyan" \| "pink" \| "green" \| "purple" \| "orange" \| "yellow" \| string`	-	Color of the glow effect on hover / proximity activation. Defaults to hoverStrokeColor, which in turn defaults to strokeColor.
`proximityRadius`	`number`	`100`	Radius in pixels within which a letter transitions to its hover state individually as the cursor draws near. Increase for a wider activation zone.
`proximityEffect`	`boolean`	`true`	Enable the per-letter proximity effect driven by cursor distance. When false, hovering anywhere over the text activates all letters at once (whole-text hover).
`transitionDuration`	`number`	`200`	Duration in milliseconds for the stroke color, fill color, and glow transitions on each letter.
`className`	`string`	-	Additional Tailwind or custom CSS classes applied to the outer wrapper. Use this for font weight, font family, letter spacing, line height, etc.