Pointer Card

A React component that displays a stylish card with a custom animated pointer/label following your mouse. Useful for interactive UI cards, hero sections, or feature spotlights. Inspired by modern web design trends.

Live Preview

Installation

You can install the PointerCard component with the following CLI command, or copy the implementation manually:

typescript-icon
1npx shadcn@latest add http://localhost:3000/r/pointer-card.json

Import

To use the PointerCard component, import it in your code:

typescript-icon
1import PointerCard from '@/components/PointerCard';

Props

The PointerCard component accepts the following props:

PropTypeDefaultDescriptionRequired
childrenReact.ReactNode-Content to display as the card body. If omitted, a default demo card is shown.No
classNamestring-Extra CSS classes for the card container.No
titlestring"Quartz UI"Label to show inside the animated pointer on hover.No

Example usage

Basic usage

typescript-icon
1<PointerCard />

Custom label in pointer

typescript-icon
1<PointerCard title="Cool Pointer!">Custom content</PointerCard>

With custom styling

typescript-icon
1<PointerCard className="max-w-md border-blue-300">Your content</PointerCard>

Features

  • Animated pointer: The card features a mouse-following pointer with smooth color transitions.
  • Customizable label: Show your brand, action, or call-to-action in the pointer on hover.
  • Composable: Use any children/content as the card body.
  • Styled with Tailwind: Easily add custom styling with the className prop.

Example: Custom Content

typescript-icon
1<PointerCard title="CTA Pointer">
2  <div className="flex flex-col p-6 gap-4">
3    <h2 className="text-2xl font-bold">Interactive Card</h2>
4    <p>This card responds to your mouse—great for onboarding, landing pages, or playful UI highlights!</p>
5    <button className="rounded bg-purple-600 text-white py-2 px-4 text-sm font-semibold hover:bg-purple-700">Try Now</button>
6  </div>
7</PointerCard>

Customization

  • Pass your own children to create any content or card body.
  • Use the title prop to set the animated pointer label.
  • Style freely with className or edit the included demo markup.

Troubleshooting

  • Requires motion.dev for animations.
  • If images fail to load, update Next.js image domains in your config.
  • The pointer appears only on mouse hover inside the card.
  • Style or layout issues? Check your TailwindCSS config.