/ux
Components/Navigation/Spotlight

Spotlight

Navigation

Full command-palette overlay with Mod+K shortcut.

Cmd+K style action palette. Pass a flat actions list; the component handles grouping, filtering, and keyboard navigation. Default shortcut is mod+K (Cmd+K on Mac, Ctrl+K on Windows/Linux).

Usage

import { Spotlight } from "nosible-ux"

const actions = [
  { id: "scan", label: "Scan signals", group: "Signals", onTrigger: () => {} },
  { id: "watchlist", label: "Open watchlist", group: "Navigation", onTrigger: () => {} },
  { id: "export", label: "Export report", group: "Reports", onTrigger: () => {} },
]

export default function Example() {
  return <Spotlight actions={actions} placeholder="Search actions..." />
}

Examples

With descriptions and keywords

or pressCtrl+K

Accessibility

Dialog-based: focus is trapped, Escape closes, and role="dialog" is applied. Command list uses role="listbox" with role="option" items. Active item is tracked via aria-activedescendant.

Props

Name TypeDefaultDescription
actions
SpotlightAction[]—Flat list of actions to surface in the palette.
filter
((actions: SpotlightAction[], query: string) => SpotlightAction[]) | undefined—Custom filter function. Receives all actions and the current query; returns the filtered subset. Defaults to label + description + keywords substring match (case-insensitive).
limit
number | undefined—Maximum items shown per group. Unlimited by default.
nothingFound
ReactNode—Content shown when no actions match the current query. Default: `"No results found."`.
onOpenChange
((open: boolean) => void) | undefined—Called when the palette requests to open or close.
open
boolean | undefined—Controlled open state.
placeholder
string | undefined—Placeholder text for the search input. Default: `"Search…"`.
shortcut
string | undefined—Keyboard shortcut that opens / closes the palette. Format: `"mod+K"` (mod = ⌘ on Mac, Ctrl elsewhere). Default: `"mod+K"`.
← All ComponentsGetting Started →