Shimmer Button

A light sweeps across the face while a beam runs the border.

Third beta cohort. Free while it lasts; 2,418 builders already in.

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/shimmer-button.json

import { ShimmerButton } from "@/components/ui/shimmer-button"

<ShimmerButton size="lg">Claim your handle</ShimmerButton>

Outline is dark glass with a lit edge. Solid lights the whole face and turns the beam white.

Heights and radii match Button, so the two share a row.

beamDuration sets seconds per lap; shimmerDuration sets the gap between sweeps.

asChild hands the shimmer to its child, so a link stays a link.

Also accepts every native button attribute. The ref points at the button (or the asChild element).

Prop	Type	Default
`variant`	`"outline" \| "solid"` Dark glass with a lit edge, or a lit face.	`"outline"`
`size`	`"sm" \| "md" \| "lg"` 32, 40 or 48px tall, like Button.	`"md"`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited
`beamDuration`	`number` Seconds for the beam to run once around the border.	`4`
`shimmerDuration`	`number` Seconds from one sweep across the face to the next.	`3.2`
`asChild`	`boolean` Render the child element (a link, say) with the shimmer and merge props onto it.	`false`
`disabled`	`boolean` Dims the button and blocks clicks. With asChild it sets aria-disabled and removes it from the tab order.	`false`

It is a native button, so Enter and Space activate it and the focus ring matches Button.
The beam and the sweep are decoration: aria-hidden and pointer-events: none.
The beam is drawn as dashes on an SVG rect, so it travels at a constant speed on wide buttons instead of racing along the long edges.
Under prefers-reduced-motion the beam parks at a fixed spot and the sweep is hidden.