SpotlightCard

v1.1.0

Pro

bash

npm install @hua-labs/hua

tsx

import { SpotlightCard } from "@hua-labs/ui/advanced";

Feature Card Grid

Pro

Move your mouse over the cards

Fast

Optimized performance

Secure

Enterprise-grade security

Real-time

Instant updates

Colored Spotlight

Customize color with spotlightColor

Blue

Blue spotlight

Purple

Purple spotlight

Green

Green spotlight

Large Spotlight

spotlightSize=500, gradient=false

Large Spotlight

Dramatic effect with larger spotlight area.

Hero Section Example

Full-width promotional card

New Feature Launch

Experience faster, safer, and smarter workflows.

Props


`spotlightColor`	`string`	`"rgba(255, 255, 255, 0.1)"`	Color of the spotlight effect
`spotlightSize`	`number`	`300`	Size of the spotlight in pixels
`gradient`	`boolean`	`true`	Enable subtle gradient overlay
`gradientFrom`	`string`	`"rgba(255, 255, 255, 0.05)"`	Gradient start color
`gradientTo`	`string`	`"transparent"`	Gradient end color
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Card content

docs:common.basicUsage

tsx

import { SpotlightCard } from '@hua-labs/ui/advanced';

export function FeatureCard() {
  return (
    <SpotlightCard className="p-6">
      <div className="text-3xl mb-3">🚀</div>
      <h3 className="font-bold text-white mb-2">Fast Performance</h3>
      <p className="text-sm text-gray-400">
        Optimized for quick loading
      </p>
    </SpotlightCard>
  );
}

Custom Colors

tsx

import { SpotlightCard } from '@hua-labs/ui/advanced';

export function ColorfulSpotlight() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <SpotlightCard
        spotlightColor="rgba(59, 130, 246, 0.15)"
        className="p-6"
      >
        <h3 className="text-blue-400 font-bold">Blue</h3>
      </SpotlightCard>

      <SpotlightCard
        spotlightColor="rgba(168, 85, 247, 0.15)"
        className="p-6"
      >
        <h3 className="text-purple-400 font-bold">Purple</h3>
      </SpotlightCard>
    </div>
  );
}

Related Components

GlowCard

Card with mouse-following glow effect

TiltCard

Card with 3D tilt effect

•Screen Reader: Supports aria-label on the card container to provide a descriptive label for assistive technologies.
•Focus: Displays a visible focus ring when card or its interactive children receive keyboard focus.
•Visual Enhancement Only: Spotlight effect is purely decorative and does not convey information, ensuring content remains accessible.

TiltCardPro KanbanBoardPro