Shimmer Button
uiA button with a light sweep on hover, with variant and size options.
Variants
Installation
Namespace
npx shadcn@latest add @soultel/shimmer-buttonURL
npx shadcn@latest add https://asafefe.dev/r/shimmer-button.jsonDependenciesclass-variance-authority
Usage
import { ShimmerButton } from "@/components/ui/shimmer-button"
export function Example() {
return <ShimmerButton>Get started</ShimmerButton>
}Notes
The shimmer runs once on hover, so it reads as a response to the user rather than constant motion. Everything is a plain
<button> underneath, so onClick, disabled, type, and the rest of the native props pass straight through.Props
| Prop | Type | Default |
|---|---|---|
variant | default outline ghost | default |
size | sm default lg | default |
Any
className you pass is merged after the variant classes, so you can override colors, width, or radius without fighting specificity.Notes
The sweep is a single absolutely positioned layer with
mix friendly opacity, so it works on any background. For a reduced-motion pass, drop the group-hover:animate-* class and the button stays fully functional.