Skip to content
38

Spotlight Card

SourceReport issue

Card surface with a crisp spotlight that tracks the cursor and fades in on hover. Built on Cursor Glow and design tokens.

Example

Installation

npx shadcn@latest add https://hirael.com/r/spotlight-card.json

Usage

import { SpotlightCard } from "@/components/spotlight-card"

Paths assume the default @/ alias from your components.json. The example above shows the parts composed.

API

<SpotlightCard />

+ native element props
PropTypeDefault
size

Diameter of the glow, in px.

number350
color

Glow color. Defaults to a soft tint of the foreground token.

string'color-mix(in oklch, var(--foreground) 10%, transparent)'
blur

Soften the glow's edge. Turn off for a crisper spotlight.

booleanfalse

Component source

import { cn } from '@/lib/utils';
import { CursorGlow, type CursorGlowProps } from '@/registry/hirael/bases/radix/components/cursor-glow';

export type SpotlightCardProps = CursorGlowProps;

/** A card surface with a crisp cursor spotlight: Cursor Glow with card styling and no blur. */
const SpotlightCard = ({
  className,
  size = 350,
  color = 'color-mix(in oklch, var(--foreground) 10%, transparent)',
  blur = false,
  ...props
}: SpotlightCardProps) => {
  return (
    <CursorGlow
      data-slot="spotlight-card"
      size={size}
      color={color}
      blur={blur}
      className={cn('rounded-lg border border-border bg-card text-card-foreground', className)}
      {...props}
    />
  );
};

export { SpotlightCard };

Dependencies

shadcn registry

cursor-glow