Spotlight

Spotlight is a centered, full-screen search overlay (role="dialog", aria-modal) for command palettes and quick search. It auto-focuses the input on open, dismisses on Escape or backdrop click, and renders your filtered results as children below a scrollable area. It is fully controlled: you own the query value/onChange and the open/onOpenChange state, and you supply the result list.

Example

Preview

import { Spotlight } from '@officina/ui';
import { useState } from 'react';

function Search() {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState('');
  return (
    <Spotlight
      open={open}
      onOpenChange={setOpen}
      value={query}
      onChange={setQuery}
      placeholder="Search commands…"
    >
      {results.map((r) => (
        <button key={r.id} onClick={r.run}>
          {r.label}
        </button>
      ))}
    </Spotlight>
  );
}

API

Prop	Type	Default	Description
onChange*	(value: string) => void	—	Called with the new query on input.
onOpenChange*	(open: boolean) => void	—	Called when the open state changes (Esc, overlay click).
open*	boolean	—	Whether the spotlight overlay is open.
value*	string	—	Current search query.
children	ReactNode	—	Result list rendered below the input.
placeholder	string	Search	Placeholder text for the search input.

Example

API

On this page