ComponentsLight
Neon sign
A neon sign that hums and flickers on.
Open late
Installation
$ npx shadcn@latest add @textlab/neon-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { NeonText } from "@/components/textlab/neon-text/neon-text";
<NeonText text="Open late" color="oklch(0.78 0.18 200)" />Variants
flickersteadypulseProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "flicker" | "steady" | "pulse" | "flicker" | Powers on and stutters now and then, hums gently, or breathes its glow. |
| color | string | hot pink | Tube color. The core is mixed toward white. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Nightlife, music and retro brands on dark backgrounds.
- A single sign-like word.
Skip it
- Light backgrounds; the glow washes out.
- Running copy.
Accessibility and motion
Accessibility
- Flicker stays under two flashes per second.
- The text is plain and unsplit.
Motion
- Power-on takes 1.4 s, then a rare stutter every 7 s.
- Pulse breathes the halo over 3 s, not the letters.
Reduced motion. The sign glows steadily with no flicker.
Performance
- Text-shadow only; animation is CSS.
- Pulse animates text-shadow, which repaints; use it once per screen.