Spotlight card

Installation

$ npx shadcn@latest add https://goodui.dev/r/spotlight-card.json

The file lands in components/goodui/spotlight-card.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/spotlight-card works too.

Usage

import { CalendarCheck, CreditCard, MessageSquare } from "lucide-react"
import { SpotlightCard, SpotlightGroup } from "@/components/goodui/spotlight-card"

const features = [
  { icon: CalendarCheck, title: "Online booking", text: "Clients pick a slot from your real availability." },
  { icon: MessageSquare, title: "SMS reminders", text: "Automatic reminders 24 hours and 2 hours before." },
  { icon: CreditCard, title: "Deposits", text: "Take a card deposit when the booking is made." },
]

export function Features() {
  return (
    <SpotlightGroup className="grid gap-4 sm:grid-cols-3">
      {features.map((f) => (
        <SpotlightCard key={f.title} className="p-6">
          <f.icon className="size-5 text-primary" />
          <h3 className="mt-4 font-semibold">{f.title}</h3>
          <p className="mt-1 text-sm text-muted-foreground">{f.text}</p>
        </SpotlightCard>
      ))}
    </SpotlightGroup>
  )
}

When to use

Examples

<SpotlightCard
  className="p-6"
  size={420}
  spotlightColor="color-mix(in oklch, var(--primary) 12%, transparent)"
  borderColor="var(--primary)"
>
  <h3 className="font-semibold">Pro plan</h3>
  <p className="text-sm text-muted-foreground">Unlimited staff and locations.</p>
</SpotlightCard>

API reference

Accessibility

• •SpotlightCard is a plain <div> with card styles; the light is drawn with pseudo-elements that ignore the pointer and are not announced.
• •If the whole card is clickable, put a real link or button inside it; the card itself is not focusable.
• •The effect follows the pointer only; keyboard users see a normal card.

Motion

• •A soft radial fill (`size` px, 360) and a lit border ring (75% of that size) follow the pointer and fade in and out over 0.35 s.
• •Inside a SpotlightGroup, moving anywhere over the group lights the borders of every card near the pointer, while only the hovered card gets the fill.
• •The light follows the pointer directly; nothing loops.
• •Reduced motion: the fade in and out is instant.

• •Pointer moves only write two CSS variables; React does not re-render. SpotlightGroup batches updates to one per animation frame.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related