Focus Card

A card with a subtle radial gradient spotlight that follows the user's cursor, bringing attention to the elements you're hovering over. Great for feature grids and pricing cards.

Installation

CLI

npx @modus-ui/cli add focus-card

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/focus-card.tsx.
3. Paste the code.

Usage

import { FocusCard } from "@/components/ui/focus-card";

export default function Example() {
  return (
    <FocusCard>
      <div className="relative z-10 p-8">
        <h3 className="text-xl font-semibold">Hover me</h3>
        <p>The spotlight follows your mouse.</p>
      </div>
    </FocusCard>
  );
}

Props