caliper uidocs
DemoSign inGet Pro

Spotlight grid

Block

A grid where a spotlight follows the pointer.

Installs components/ui/spotlight-grid.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/spotlight-grid.json

  • Fast by default

    Windowed lists, lazy canvases and no layout shift.

  • Accessible first

    Keyboard, screen reader and reduced motion are release requirements.

  • Themeable

    One set of tokens drives light, dark and your brand.

  • You own the code

    Components are copied into your project to edit freely.

  • Motion with purpose

    Animation explains a change, then gets out of the way.

  • Composable

    Small primitives that fit together instead of one giant API.

When to use #

Use it for

  • Feature lists on a dark landing page.

Skip it when

  • Touch-first pages.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/spotlight-grid.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { Gauge, LockKeyhole, Palette, Zap, Accessibility, Boxes } from "lucide-react"
import { SpotlightGrid } from "@/components/ui/spotlight-grid"

export function SpotlightGridDemo() {
  return (
    <div className="grid gap-3">
    <SpotlightGrid items={[
              { id: "a", icon: <Gauge />, title: "Fast by default", body: "Windowed lists, lazy canvases and no layout shift." }, { id: "b", icon: <Accessibility />, title: "Accessible first", body: "Keyboard, screen reader and reduced motion are release requirements." },
              { id: "c", icon: <Palette />, title: "Themeable", body: "One set of tokens drives light, dark and your brand." }, { id: "d", icon: <LockKeyhole />, title: "You own the code", body: "Components are copied into your project to edit freely." },
              { id: "e", icon: <Zap />, title: "Motion with purpose", body: "Animation explains a change, then gets out of the way." }, { id: "f", icon: <Boxes />, title: "Composable", body: "Small primitives that fit together instead of one giant API." },
            ]} />
    </div>
  );
}

API reference #

SpotlightGrid

component
PropTypeDefault
items *readonly SpotlightItem[]—
classNamestring—

Accessibility #

It is built on native elements and keeps aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.