Neon Text for React

Neon Text lights a line like a sign: each letter is a bright tube in a soft halo of its own colour. It flickers on when the page shows it, the halo breathes, and every couple of seconds a tired letter buzzes for a moment.

Use it for a short headline or a label on a dark surface, where the glow reads as light; on a light page it shows as coloured letters in a softer halo. For letters that fail and blink, use Flickering Text; for colour that flows, Gradient Text. It's CSS only: the glow is shadows that never animate, each letter's halo is a copy behind it whose opacity breathes, and the keyframes the install adds to your stylesheet only dim the letters, never more than three times a second. With reduced motion the sign is simply on.

Installation

Usage

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

<h1>
  <NeonText text="Open all night" />
</h1>

Demos

Colors

color is the tube, any CSS colour: the letters take it on a light page, and on a dark one it's the glow around a whiter core. Choose a saturated colour; a grey tube doesn't glow.

Sign

On a dark surface the halo reads as light, like a sign at night; the dark class gives a section your theme's dark colours. flicker={false} turns a sign on without the flicker, for a second line that shouldn't compete with the first.

Accessibility

Screen readers read the text once, from a visually hidden copy; the glowing letters are hidden from them. The switch-on flicker and the buzz never pass three flashes a second, the buzz stops while the pointer is over the text, and with reduced motion nothing flickers or breathes. In forced-colors mode the glow is dropped and the letters take the system's text colour. On a light page, check the contrast of color against it.

FAQ

API Reference