Components
Loading preview...
A button with a mouse-following highlight that darkens the surface as the cursor moves, fades in a soft border on hover, and bursts a radial ripple from the exact click point. Theme-aware, with overridable highlight color, size, and border color.
@radiumcoders
npx shadcn@latest add https://21st.dev/r/radiumcoders/highlight-button"use client";
import { HighlightButton } from "@/components/ui/highlight-button";
export default function Default() {
return (
<div className="flex min-h-screen w-full flex-wrap items-center justify-center gap-6 bg-background p-12">
<HighlightButton>Hover Me</HighlightButton>
<HighlightButton
highlightColor="rgba(59, 130, 246, 0.65)"
borderColor="rgba(59, 130, 246, 0.8)"
>
Blue Glow
</HighlightButton>
<HighlightButton
highlightColor="rgba(168, 85, 247, 0.65)"
borderColor="rgba(168, 85, 247, 0.8)"
>
Purple Glow
</HighlightButton>
<HighlightButton
highlightColor="rgba(34, 197, 94, 0.65)"
borderColor="rgba(34, 197, 94, 0.8)"
>
Green Glow
</HighlightButton>
</div>
);
}