Spotlight Search Panel React component
A global search overlay for an app: one field that searches pages, people, files and actions with fuzzy matching and highlighted letters, scope tabs with live counts that Tab cycles through, grouped results driven by the keyboard, a rich preview of the highlighted result, and recent searches.
About the Spotlight Search Panel component
Spotlight Search Panel is a search-everything overlay. One field finds pages, people, files and actions, forgiving typos and skipped letters, and shows exactly which letters matched.
It is made for the keyboard: ⌘K opens it, arrow keys move, Tab switches between categories and Enter opens. A preview on the right shows the highlighted result in more detail, so people can check it is the right one before opening it.
When to use it
Use it as the global search in dashboards, internal tools, docs sites and any app with many kinds of content.
If you only need a list of commands, a command palette is lighter. Choose Spotlight when results need previews and categories.
Installation
Add the Spotlight Search Panel component to your project with the shadcn CLI. It lands in components/spotlight-search-panel.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/spotlight-search-panelOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<SpotlightSearchPanel /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| items | { id: string; kind: Kind; title: string; subtitle: string; meta?: Record<string, string>; shortcut?: string[]; color?: string }[] | ITEMS |
| recent | string[] | RECENT |
| defaultOpen | boolean | true |
| onSelect | (item: SpotlightItem) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- items{ id: string; kind: Kind; title: string; subtitle: string; meta?: Record<string, string>; shortcut?: string[]; color?: string }[]Default: ITEMS
- recentstring[]Default: RECENT
- defaultOpenbooleanDefault: true
- onSelect(item: SpotlightItem) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Spotlight Search Panel FAQ
- How does the matching work?
- Every letter you type must appear in the title in the same order, so 'rvov' finds Revenue overview. Results with the letters closer together and nearer the start rank higher, and titles that start with the query come first.
- Can I search my own data?
- Yes. Pass items from your search index, or replace the filter with results from your API as the query changes. Keep the same shape and the groups, counts and preview keep working.
- Which keys work?
- ⌘K or Ctrl+K opens and closes it, ↑ and ↓ move, Enter opens, Tab and Shift+Tab change the category, and Escape clears the field and then closes.
- What happens on phones?
- The panel fills the width, the preview pane is hidden, and results and categories stay fully usable with touch.
- Is it accessible?
- The field is a combobox linked to a listbox with aria-activedescendant, categories are tabs, every result is an option with its group labelled, and the preview updates politely.
