Neon Text

Neon Text recreates the classic neon sign aesthetic with glowing colors and subtle flicker effects! Perfect for retro-themed interfaces, cyberpunk designs, or any project that needs that nostalgic neon glow from the 1980s.

Preview

Code

Neon Colors

Blue Neon Glow

Green Neon Glow

Pink Neon Glow

Purple Neon Glow

Red Neon Glow

Yellow Neon Glow

Glow Intensities

Low Intensity Glow

Medium Intensity Glow

High Intensity Glow

Stylized Examples

NEON NIGHT

RETRO STYLE

CYBERPUNK

Interactive Demo

NEON MAGIC

Experience the glowing neon effect with animated flickers

Installation

First, make sure you have the required dependencies:

npx @rajdevxd/aura-ui add neon-text

yarn @rajdevxd/aura-ui add neon-text

pnpm dlx @rajdevxd/aura-ui add neon-text

bunx --bun @rajdevxd/aura-ui add neon-text

Usage

import { NeonText } from "@/components/ui/neon-text"

export function Example() {
  return (
    <NeonText
      text="RETRO NEON"
      color="pink"
      intensity="medium"
    />
  )
}

Props

Prop	Type	Required	Description
`text`	`string`	Yes	The text to apply neon effect to
`color`	`"blue" \| "green" \| "pink" \| "purple" \| "red" \| "yellow"`	No	Neon color (default: "blue")
`intensity`	`"low" \| "medium" \| "high"`	No	Glow intensity (default: "medium")
`className`	`string`	No	Additional CSS classes

Color Options

Blue Neon

Classic blue neon glow.

<NeonText text="BLUE NEON" color="blue" />

Green Neon

Matrix-style green glow.

<NeonText text="GREEN NEON" color="green" />

Pink Neon

Hot pink retro glow.

<NeonText text="PINK NEON" color="pink" />

Purple Neon

Electric purple glow.

<NeonText text="PURPLE NEON" color="purple" />

Red Neon

Classic red neon sign.

<NeonText text="RED NEON" color="red" />

Yellow Neon

Golden yellow glow.

<NeonText text="YELLOW NEON" color="yellow" />

Intensity Levels

Low Intensity

Subtle, gentle glow.

<NeonText text="Low Glow" intensity="low" />

Medium Intensity (Default)

Balanced neon glow.

<NeonText text="Medium Glow" intensity="medium" />

High Intensity

Bright, intense glow.

<NeonText text="High Glow" intensity="high" />

Features

Authentic Neon: Realistic neon sign glow effects
Multiple Colors: 6 different neon colors
Flicker Effects: Subtle animation for authenticity
Intensity Control: Three levels of glow strength
Retro Aesthetic: Perfect for 80s/90s themed designs
Hardware Acceleration: Smooth glow animations

Advanced Usage

Neon Sign Board

<div className="bg-gray-900 p-8 rounded-lg">
  <NeonText
    text="OPEN 24/7"
    color="pink"
    intensity="high"
    className="text-4xl font-bold text-center"
  />
</div>

Cyberpunk Interface

<div className="bg-black p-6 rounded-lg space-y-4">
  <NeonText text="SYSTEM STATUS" color="green" intensity="medium" />
  <NeonText text="ONLINE" color="blue" intensity="high" />
  <NeonText text="SECURE" color="purple" intensity="medium" />
</div>

Interactive Neon

const InteractiveNeon = () => {
  const [color, setColor] = React.useState('blue')

  return (
    <div className="space-y-4">
      <div className="flex space-x-2">
        <button onClick={() => setColor('blue')}>Blue</button>
        <button onClick={() => setColor('green')}>Green</button>
        <button onClick={() => setColor('pink')}>Pink</button>
        <button onClick={() => setColor('purple')}>Purple</button>
      </div>

      <NeonText
        text="INTERACTIVE NEON"
        color={color}
        intensity="high"
        className="text-2xl font-bold"
      />
    </div>
  )
}

Neon Grid

<div className="grid grid-cols-2 gap-4">
  <NeonText text="ARCADE" color="red" intensity="high" />
  <NeonText text="GAMES" color="blue" intensity="high" />
  <NeonText text="RETRO" color="green" intensity="high" />
  <NeonText text="STYLE" color="yellow" intensity="high" />
</div>

Performance

GPU Accelerated: Uses CSS text-shadow for glow effects
Efficient Rendering: Minimal DOM manipulation
Hardware Acceleration: CSS shadow animations
Memory Efficient: Lightweight glow system

Browser Support

Modern Browsers: Full support for Chrome, Firefox, Safari, Edge
CSS Text Shadow: Requires CSS text-shadow support
Fallback: Graceful degradation to solid color

Accessibility

Screen Reader Support: Proper text content for assistive technologies
Reduced Motion: Respects user's motion preferences
High Contrast: Maintains readability with glow effects

Neon Text - bringing retro neon signs to the digital age! 🔴💙💜

Aura UI