CardSpotlight
card-spotlightTracks the pointer with a radial spotlight inside a card surface.
Usage
Basic usage
Wraps the card content and displays a soft spotlight at the cursor when the mouse is hovered (default chart-1).
Hulian component
Ancestral temple jade, both beautiful and useful - hover the mouse to feel the soft spotlight.
<CardSpotlight className="w-64">
<div className="mb-3 text-3xl">✦</div>
<h3 className="mb-1.5 text-base font-semibold">Hulian Component</h3>
<p className="text-sm text-muted">Hover the mouse to feel the soft spotlight. </p>
</CardSpotlight>Custom highlight color
color Pass any CSS color (including token), and the highlight will be linked with the theme color.
Theme color highlight
color passes to var (--color-primary), the highlight is linked with the theme.
<CardSpotlight color="var(--color-primary)" className="w-64">
<div className="mb-3 text-3xl">⚡</div>
<h3 className="mb-1.5 text-base font-semibold">Theme color highlight</h3>
<p className="text-sm text-muted">Highlights are linked with the theme. </p>
</CardSpotlight>Focus on small radius
radius The smaller the halo, the tighter it is, suitable for emphasizing a single core content area.
Focused beam
radius=180 The halo is tighter, suitable for emphasizing core content areas.
<CardSpotlight radius={180} color="var(--color-chart-3)" className="w-64">
<div className="mb-3 text-3xl">🔍</div>
<h3 className="mb-1.5 text-base font-semibold">Focused beam</h3>
<p className="text-sm text-muted">radius=180 The halo is tighter. </p>
</CardSpotlight>Multiple cards tied together
Each card tracks the cursor independently and is equipped with different highlight colors to form a characteristic grid.
Design
Pixel-level restoration, the theme is linked with the system.
Engineering
TypeScript Full coverage, the type is the document.
<div className="flex flex-wrap gap-4">
<CardSpotlight color="var(--color-chart-1)" className="w-64">...</CardSpotlight>
<CardSpotlight color="var(--color-chart-2)" className="w-64">...</CardSpotlight>
</div>When to Use
Wrap feature, work, or pricing-card content when a soft pointer-following radial highlight should make the surface feel responsive. The spotlight is anchored to the card. Use BorderBeam for a moving border highlight, GlareHover for a sweeping reflection, or Lens to magnify local content.
Import
import { CardSpotlight } from "@hulianui/ui"Props
Extends HTMLAttributes<HTMLDivElement>, forwarding className, style, onClick, and other native attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| radius | number | 350 | Spotlight radius in pixels; higher values spread the highlight and lower values focus it |
| color | string | chart-1 token | Spotlight color; accepts any CSS color such as "#7c3aed" or "var(--color-primary)" |
Slots
| Slot | Type | Description |
|---|---|---|
| children* | ReactNode | Card content |
Usage Guidelines
- To follow the active theme, pass a CSS variable with the
--color-prefix, such asvar(--color-primary). Tailwind v4 does not expose bare names such asvar(--primary)here. - The spotlight tracks pointer movement on the client. It remains inactive during SSR and on devices without a pointer; the card content still renders normally.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
CardSpotlight
Hover to feel the spotlight effect, and move the mouse to track the center of the halo.
<CardSpotlight className="w-64">
<div className="mb-3 text-3xl">✦</div>
<h3 className="mb-1.5 text-base font-semibold">Title</h3>
<p className="text-sm text-muted">Card description text. </p>
</CardSpotlight>