Klyv Shimmer Button

Component 10

About

A call to action with a sheen sweeping across it and a light that follows the pointer, written to CSS variables rather than to state.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Klyv Shimmer Button to your project and fits it to your theme.

Code

How Klyv Shimmer Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ArrowRight, Sparkles } from "lucide-react";
import { ShimmerButton } from "@/components/ui/klyv-shimmer-button";

const SourceExample = () => (
          <div className="flex w-full flex-wrap items-center gap-3">
            <ShimmerButton size="lg">
              <Sparkles size={16} strokeWidth={2.5} aria-hidden="true" />
              Upgrade to Plus
            </ShimmerButton>
            <ShimmerButton tone="ink">
              Send money
              <ArrowRight size={15} strokeWidth={2.5} aria-hidden="true" />
            </ShimmerButton>
            <ShimmerButton tone="glass" onHover>
              Sweeps on hover
            </ShimmerButton>
            <ShimmerButton size="sm" tone="glass" glow={false}>
              No glow
            </ShimmerButton>
          </div>
        );


export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><SourceExample /></div></div>}