Spotlight Grid
Prov1.0.0Four live tool previews that grow on hover and open in place so people can try them.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { SpotlightGrid } from "@/components/ui/notchset/blocks/spotlight-grid";
const tile = (n: number) => ({ id: `t${n}`, label: `0${n} · TOOL`, title: `Tool ${n}`, body: "What it does.", preview: <div>Preview</div>, controls: <button type="button">Try it</button> });
export function Tools() {
return <SpotlightGrid title="Four tools, in view" tiles={[tile(1), tile(2), tile(3), tile(4)]} />;
}Props
tiles–[tile, tile, tile, tile]Each { id, label, title, body, preview, controls? }; preview and controls are nodes or (open) => node.
eyebrow / title / description–string / ReactNode / ReactNodeThe header.
Anatomy
- One tile is active at a time: the pinned one, else the one pointed at.
- Clicking a closed tile opens it; the button closes it.
- Previews and controls get whether their tile is open.
SpotlightGriddata-slot="spotlight-grid"Header and the four tiles.
Source
components/ui/notchset/blocks/spotlight-grid.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/spotlight-gridNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A landing section where each feature can be tried, not just read about
- Four tools of equal weight
Use something else when
- More or fewer than four features: use Feature Bento
- Static screenshots: a plain grid is lighter
Mistakes to avoid
- Make every preview do something when opened, or the OPEN button is a lie
- Pause live previews when off screen (the demo's latency tile does)
Agents find it by
- feature showcase, product tour, interactive features, tool grid, try it, spotlight, landing page, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/spotlight-grid.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- Enter / Space
- Open or close a tile
- Esc
- Close the open tile
- Tab
- Into the open tile's controls
Accessibility
- Each tile has a heading and an OPEN / CLOSE button with aria-expanded, named with the tile
- Folded controls are inert; Esc closes the open tile and returns focus to its button
- The hint is announced as it changes (HOVER TO PREVIEW · OPEN TO TRY, then ESC CLOSES)
Motion
- Hover
- The tile's column and row grow (560ms glide); the others dim to 42%
- Open
- The controls unroll in 420ms; the tile takes the field ground
Responsive
- Under 700px (container width) the tiles stack at 300px or more and only pinning changes them.
Performance
- The grid itself only animates two grid tracks; previews decide their own cost.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
