shadcn.io is an independent project built on shadcn/ui
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.
Installation
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.
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.
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.
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.
API Reference
NeonButton
data-slot="neon-button-glow"
children?ReactNode
The label, inside the glow.
clickEffect?boolean
Apply a click effect to the button.
- Default
true
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"
isLoading?boolean
Show a loading indicator.
- Default
false
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
asChild?boolean
Merge props onto the child element instead of rendering a host.
className?string
Merged with the part's classes.
--neon-button-colorstring
The glow's color (the primary color by default).
--neon-button-reachstring
How far the near glow reaches (10px at medium).
