Shimmer Button

When to useCopy Anchor Link

Use it for the single most important action on a page, such as "Get started" in a hero. The shimmer works because it is rare: one per screen, never for secondary actions.

PlaygroundCopy Anchor Link

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @cadence/shimmer-button

UsageCopy Anchor Link

import Link from "next/link"

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

export function Hero() {
  return (
    <ShimmerButton asChild size="lg">
      <Link href="/signup">Get started</Link>
    </ShimmerButton>
  )
}

Use asChild to render a link (or any element) with the button styles. The brand variant uses the --brand color, which the CLI adds to your theme; neutral uses your theme's primary.

PropsCopy Anchor Link

ExamplesCopy Anchor Link

Sizes, variants and linksCopy Anchor Link

AccessibilityCopy Anchor Link

• It is a native <button> (or your own element with asChild), with a visible focus ring and the disabled state handled for you.
• The shimmer is decorative and hidden from assistive technology.
• With reduced motion the shimmer is removed entirely.

PerformanceCopy Anchor Link

• The sweep is a single transform animation run by the browser's compositor.
• It stops while the button is off screen or the tab is hidden.