Spotlight

Command palette modal overlay component featuring auto-focused search input, keyboard navigation shortcuts, and result list slot.

// Radix — @radix-ui/react-dialog
import { Spotlight } from "@shavin/ui";

Interactive Demo

Or press ⌘K / Ctrl+K

Component Source

import { Spotlight, Button, Kbd, Badge } from "@shavin/ui";

function CommandPalette() {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");

  return (
    <>
      <Button variant="ghost" onClick={() => setOpen(true)}>
        <span>Search</span>
        <Kbd>⌘K</Kbd>
      </Button>

      <Spotlight
        open={open}
        onOpenChange={setOpen}
        query={query}
        onQueryChange={setQuery}
        placeholder="Type to search..."
      >
        {/* Render grouped search suggestions */}
      </Spotlight>
    </>
  );
}

Prop	Type	Default	Description
open*	boolean	—	Whether the spotlight dialog is open.
onOpenChange*	(open: boolean) => void	—	Callback fired when open state changes (e.g. via Escape key or backdrop click).
query*	string	—	Search query value.
onQueryChange*	(query: string) => void	—	Callback fired when search query changes.
onKeyDown	(e: React.KeyboardEvent<HTMLInputElement>) => void	—	Callback fired on keyboard input (e.g. ArrowUp, ArrowDown, Enter navigation).
placeholder	string	—	Input placeholder text.
children	ReactNode	—	Content rendered below input (e.g. search suggestions, grouped items).
footer	ReactNode	—	Optional custom footer bar (defaults to standard keyboard shortcut hints).
className	string	—	Additional container className overrides.

* required

Key	Action
ArrowDown	Highlight next search result item
ArrowUp	Highlight previous search result item
Enter	Select highlighted result item and execute action
Escape	Dismiss Spotlight modal