Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Buttons

Pro

Neon Button for React

A button that lights up with a neon glow on hover, flickering on like a sign and humming softly after. For React with Base UI, when an action should feel electric in a dark interface.

Framework
UI library

When the pointer arrives or the button takes keyboard focus, a glow in the primary color flickers on around its edge, then hums gently, brightening and dimming, for as long as the pointer stays. It fades out when the pointer leaves.

Use it for gaming, streaming, crypto and other dark, high-contrast interfaces, on an action that should feel switched on. The glow is shadows of your primary color, so it reads in light mode too, as a colored shadow. For a glow that pulses on its own, without a hover, use the Pulse Button. It wraps the Button, so variant and size work as usual. The flicker and the hum are CSS keyframes the install adds to your stylesheet, with no animation library. With reduced motion the glow just turns on and stays still.

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { NeonButton } from "@/components/ui/neon-button";
<NeonButton>Enter the arena</NeonButton>

Demos

Intensity

intensity sets how far the glow reaches: subtle, medium (the default) or strong. These buttons are lit, so all three show at once. strong stands out most on a dark background; subtle is enough on a light one.

Preview width

Color

glowColor takes any CSS color, such as var(--destructive) or var(--foreground). The default is the primary color. Match it to the button's variant so the glow looks like it comes from the button.

Preview width

Lit

lit keeps the glow on at rest, without the flicker, and hover still makes it hum. Use it for a state, such as a stream that's on air or a mode that's switched on, next to buttons that aren't.

Preview width

Accessibility

The glow is decoration and hidden from assistive tech: the button is announced and activated as any Button. It lights up on keyboard focus as well as on hover. lit is only a look; if it means a state, say so with aria-pressed or in the label.

Enter
Activate the button.
Space
Activate the button.

FAQ

How do I make the glow stronger?

Pass intensity="strong". The default is medium, and subtle is the softest. The Intensity demo shows all three.

Does it use my theme's colors?

Yes. The glow is the primary color by default, so it changes with your theme. Pass glowColor for another one, such as var(--destructive).

Can it glow when nobody hovers it?

Yes. Pass lit and the glow stays on at rest, as in the Lit demo. For a glow that pulses on its own to draw attention, use the Pulse Button.

Does it work in light mode?

Yes. The glow is shadows of the primary color, so on a light page it shows as a colored shadow around the button rather than a light. It's at its most striking on a dark background.

Is the glow expensive to draw?

No. The shadows are drawn once on a layer of their own, and the flicker and the hum only change that layer's opacity and scale, which the browser can hand to the compositor. The hum only runs while the pointer is over the button.

What happens with reduced motion?

The glow turns on without the flicker and doesn't hum. It still shows on hover and focus.

API Reference

NeonButton

data-slot="neon-button-glow"

PropType
children?ReactNode

The label, inside the glow.

focusableWhenDisabled?boolean

Whether the button should be focusable when disabled.

Default
false
glowColor?string

The glow's color, any CSS color. By default the primary color.

intensity?"subtle" | "medium" | "strong"

How far the glow reaches.

Type
"subtle" | "medium" | "strong"
Default
"medium"
lit?boolean

Keep the glow on at rest, as a sign that's switched on, without the flicker; hover still makes it hum.

Default
false
nativeButton?boolean

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

Default
true
render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string

Merged with the part's classes.

CSS variableType
--neon-button-colorstring

The glow's color (the primary color by default).

--neon-button-reachstring

How far the near glow reaches (10px at medium).

All 35 buttons