Toggle Sidebar B
AppearanceLight & dark mode D

Spotlight Card

Dynamic spotlight follows cursor casting gradient illumination.

Default

Move the pointer across the card. The card has no fixed size, so give it a class to set its width and height.

Light previewReplay previewOpen in new tab

Boost Your Experience

Get exclusive benefits, features & 24/7 support as a permanent club member.

Customize

Spotlight Color

API Reference

SpotlightCard

PropTypeDefaultDescription
spotlightColorstring"rgba(255, 255, 255, 0.25)"Controls the color of the radial gradient used for the spotlight effect.

SpotlightCard slots

PropTypeDefaultDescription
defaultslot-Content rendered inside the card.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • The spotlight also shows while focus is inside the card, so keyboard users get the highlight.
  • The card is a plain container. Add roles and labels to the content you put in it.
SpinnerStack