Shimmer Button

A button with an animated shimmering border light effect.

Installation

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

Requires the @godui namespace in your components.json (one-time setup):

{  "registries": {    "@godui": "https://godui.design/r/{name}.json"  }}

Usage

import { ShimmerButton } from "@/components/godui/shimmer-button";
<ShimmerButton variant="primary">Click me</ShimmerButton>

Examples

Sizes

Without shimmer

Set shimmer={false} to keep the button styling without the animated border light.

Disabled

Props

PropTypeDefaultDescription
variant"primary" | "secondary" | "outline""primary"Visual style of the button
size"sm" | "default" | "lg""default"Button padding and text size
shimmerbooleantrueAnimate the button with a shimmering border light effect
shimmerColorstringvariant defaultColor of the shimmering light
shimmerDurationstring"3s"Duration of the shimmer animation
backgroundstringvariant defaultBackground color override

On this page