# Spotlight Search — React Command Palette

> A large centred search field with a results column and a preview pane that crossfades to the highlighted result as you arrow through.

- Category: [Command & Search](https://pixelpapa.com/components/command.md)
- Tags: command, spotlight, search, preview, keyboard
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/command/command-spotlight-search

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/command-spotlight-search
```

The file is written to `components/pixelpapa/command-spotlight-search.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/command/command-spotlight-search.

## AI prompt

```text
Add the "Spotlight Search" component from PixelPapa UI to this project.

What it is: A large centred search field with a results column and a preview pane that crossfades to the highlighted result as you arrow through.
Category: Command & Search. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/command-spotlight-search
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/command-spotlight-search.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/command-spotlight-search.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/command-spotlight-search" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More command & search

- [Command Palette](https://pixelpapa.com/components/command/command-palette.md): A grouped command palette with fuzzy matching that highlights matched letters, a highlight that glides between rows on arrow keys, recents and footer hints.
- [Inline Slash Menu](https://pixelpapa.com/components/command/command-inline-slash-menu.md): Type "/" on an editor line to open a block menu that filters as you type, moves with the arrow keys and turns the line into the chosen block.
- [Shortcut Cheatsheet](https://pixelpapa.com/components/command/command-shortcut-cheatsheet.md): A keyboard shortcut overlay with physical-looking key caps that press down in sequence, on a demo loop, on hover, or when you type the combo.