Shimmer Button

A neon pill with a light sweep that loops across its surface. Colors, speed and glow are all props.

2 examples

Installation

Run this in your project. It adds the files, installs the npm packages and anything this builds on, and sets up the theme:

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

Install manually

Copy this into components/kryptonite/ShimmerButton.tsx:

ShimmerButton.tsx

import type { ButtonHTMLAttributes, CSSProperties } from 'react'
import { cn } from '@/lib/utils'

export type ShimmerButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  /** Main button color */
  color?: string
  /** Color of the light sweep */
  shineColor?: string
  /** Text color */
  textColor?: string
  /** Seconds for one sweep */
  speed?: number
  /** Show a soft glow around the button */
  glow?: boolean
}

export function ShimmerButton({
  color = '#39ff8f',
  shineColor = '#d9ffe9',
  textColor = '#000000',
  speed = 2.4,
  glow = true,
  className,
  style,
  children,
  ...props
}: ShimmerButtonProps) {
  return (
    <button
      style={
        {
          '--c': color,
          '--shine': shineColor,
          color: textColor,
          animationDuration: `${speed}s`,
          boxShadow: glow ? `0 0 24px -4px ${color}` : undefined,
          ...style,
        } as CSSProperties
      }
      className={cn(
        'relative inline-flex h-11 items-center justify-center rounded-full px-6 font-medium',
        'bg-[linear-gradient(110deg,var(--c),45%,var(--shine),55%,var(--c))] bg-[length:200%_100%] animate-kr-shimmer',
        'transition-transform hover:scale-105 active:scale-95',
        className,
      )}
      {...props}
    >
      {children}
    </button>
  )
}

Examples

Custom Colors

Feedback

Questions, bugs or ideas for Shimmer Button? Post them here, or reply to someone else. Sign in with GitHub to comment.