Bento Grid
Bento & Grids
Source and install need .
pnpm dlx shadcn@latest add @assembli/spotlight-gridSpotlight Grid
A grid of feature cards lit by one light that follows the pointer: it catches the borders of every card in reach, so neighbouring edges glow as you move between them, and softly washes the card beneath. Set its color and reach, and a resting position for when the pointer leaves.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
columns
2 | 3 | 4
Default
3Columns on large screens. Phones get one column and tablets two.
color
string
The light's color, as any CSS color. Defaults to the theme's foreground.
radius
number
Default
320How far the light reaches, in px.
restingLight
[number, number]
Where the light rests when no pointer is over the grid, as fractions of its width and height (
[0.5, 0]is the top center). Leave it out to turn the light off instead.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | 2 | 3 | 4 | 3 | Columns on large screens. Phones get one column and tablets two. |
| color | string | – | The light's color, as any CSS color. Defaults to the theme's foreground. |
| radius | number | 320 | How far the light reaches, in px. |
| restingLight | [number, number] | – | Where the light rests when no pointer is over the grid, as fractions of its width and height ([0.5, 0] is the top center). Leave it out to turn the light off instead. |
