SpotlightCard displays a grid of items with an interactive spotlight effect that follows the mouse cursor over each card.
SpotlightCard
import { SpotlightCard } from '@lobehub/ui/awesome';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';| Property | Description | Type | Default |
|---|---|---|---|
| items | Array of items to be displayed | any[] | - |
| renderItem | Function to render each item | (item: any) => ReactNode | - |
| columns | Number of columns in the grid | number | 3 |
| gap | Gap between grid items | number | string | '1em' |
| size | Size of the spotlight effect | number | 800 |
| borderRadius | Border radius of the cards | number | 12 |
| spotlight | Whether to enable the spotlight effect | boolean | true |
| maxItemWidth | Maximum width of each item | string | number | - |
SpotlightCard also inherits all div element properties
