Glow Card

A card with an animated glow border effect on hover.

glow-card.tsx

Glow Card

Hover over this card to see the glow effect follow your cursor along the border.

Installation

Terminal

npx shadcn@latest add "https://sniper-ui-coral.vercel.app/r/glow-card.json"

Auto-Installed Dependencies

The CLI will automatically install these packages.

Terminal

npm install framer-motion clsx tailwind-merge

Usage

Basic

page.tsx

import { GlowCard } from "@/components/ui/glow-card";

export default function MyPage() {
  return (
    <GlowCard className="p-6">
      <h3 className="text-lg font-semibold">My Card</h3>
      <p className="text-sm text-muted-foreground">
        Hover to see the glow.
      </p>
    </GlowCard>
  );
}

Examples

examples.tsx

import { GlowCard } from "@/components/ui/glow-card";

export default function MyPage() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <GlowCard>
        <h3 className="font-semibold">Feature 1</h3>
        <p className="text-sm text-muted-foreground">
          Lightning-fast build times.
        </p>
      </GlowCard>
      <GlowCard>
        <h3 className="font-semibold">Feature 2</h3>
        <p className="text-sm text-muted-foreground">
          Type-safe by default.
        </p>
      </GlowCard>
      <GlowCard className="md:col-span-1">
        <h3 className="font-semibold">Feature 3</h3>
        <p className="text-sm text-muted-foreground">
          Edge-ready deployment.
        </p>
      </GlowCard>
    </div>
  );
}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	`—`	The card content.
`className`	`string`	`—`	Additional CSS classes for the outer wrapper.

Sniper UI

An open-source library available on GitHub — contribute or star the repo to support it.

Contribute