Skip to documentation

SpotlightCard

SpotlightCard displays a grid of items with an interactive spotlight effect that follows the mouse cursor over each card.

import { SpotlightCard } from '@lobehub/ui/awesome';

NPM Source Edit

Data Display

Default

Loading preview

APIs

SpotlightCard properties

borderRadius: number
Defaults to 12.
columns: number
Defaults to 3.
gap: string | number
Defaults to "1em".
itemsRequired: any[]
maxItemWidth: string | number
renderItemRequired: (item: any) => ReactNode
size: number
Defaults to 800.
spotlight: boolean
Defaults to true.

Also accepts all native HTML and ARIA attributes.

SpotlightCard also inherits all div element properties