Shimmer Button

Interactive

A pill button with a conic-gradient highlight that travels around the border. Self-contained, themeable via props, disables motion under prefers-reduced-motion.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/shimmer-button.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/shimmer-button.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex flex-wrap items-center justify-center gap-4">
    <ShimmerButton>Get the component</ShimmerButton>
    <ShimmerButton shimmerColor="#f5a623" background="rgba(14,12,10,1)">
      Amber
    </ShimmerButton>
  </div>

Props

ShimmerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
shimmerColor	string	"#c4b5fd"	Colour of the travelling shimmer highlight.
shimmerSize	string	"0.06em"	Diameter of the shimmer highlight.
shimmerDuration	string	"2.4s"	Seconds for one full rotation.
radius	string	"9999px"	Corner radius.
background	string	"rgba(10,10,12,1)"	Background of the button face.
as	React.ElementType	—	Render as a different element for navigation semantics — e.g. an `<a>` or a router `Link`. Defaults to `"button"`. Pass `href` alongside for links.
href	string	—	Destination, used when rendering as a link element via `as`.