Shimmer Button

Pro

A call to action with a light that sweeps across it and a soft glow that breathes behind it.

Launch week

Ship your next game in half the time

Templates, analytics and cloud saves in one workspace.

14 days free, no card needed

Customize

Label

Background#ff784f

Shimmer#fff4ea

Interval2.6s

Installation

Shimmer Button is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy shimmer-button.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

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

<ShimmerButton background="#ff784f" onClick={startTrial}>
  Start free trial
</ShimmerButton>

Props

6 properties

Property	Type	Default	Description
children	ReactNode	—	Button content.
shimmerColor	string	"#fff4ea"	Color of the light that sweeps across the button.
background	string	"#ff784f"	Fill color of the button and its glow. Text turns light or dark to stay readable.
speed	number	2.6	Seconds between the start of two shimmer passes.
className	string	—	Extra classes for the button.
...props	ButtonHTMLAttributes	—	Any native button attribute, such as onClick, type or disabled.

Dependencies: motion