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

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
open*	boolean	—
onOpenChange*	(open: boolean) => void	—
query*	string	—
onQueryChange*	(query: string) => void	—
onKeyDown	(e: React.KeyboardEvent<HTMLInputElement>) => void	—
placeholder	string	—
children	ReactNode	—
footer	ReactNode	—
className	string	—

* 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