Lookout

Global search. Point it at any data, nested or flat, and search it from anywhere with ⌘K.

Component: Global search
Pattern: APG Combobox in a dialog
Outputs: React + Tailwind, HTML/CSS/JS
Status: In stock, tested

Configure

Label
Names the search. It is on the button, and screen readers read it in the box.
Placeholder
Inside the box. It hints at what can be found; the label still names it.
Data to search
Any JSON: an array, an object, nested as deep as you like. Every object with a title becomes a result, and the titles above it become its breadcrumb. A url and a description are used when present.
[{"title":"Guides","children":[{"title":"Getting started","description":"Install, configure and ship your first part","url":"/guides/start","tags":["install","setup"]},{"title":"Theming","description":"Colours, dark mode and your own tokens","url":"/guides/theming","tags":["dark mode","colour"]},{"title":"Accessibility","description":"How every part is tested","url":"/guides/accessibility","children":[{"title":"Keyboard support","description":"Every key each part answers to","url":"/guides/accessibility/keyboard","tags":["focus","shortcuts"]},{"title":"Screen readers","description":"What gets announced, and when","url":"/guides/accessibility/screen-readers","tags":["aria","voiceover","nvda"]}]}]},{"title":"Components","children":[{"title":"Date picker","description":"One date or a range","url":"/date-picker","tags":["calendar","form"]},{"title":"Data table","description":"Sortable rows that stack on a phone","url":"/table","tags":["grid","sort"]},{"title":"Modal","description":"A dialog that keeps focus inside","url":"/modal","tags":["dialog","overlay"]}]},{"title":"People","children":[{"title":"Alex Fisher","description":"Design systems lead","url":"/people/alex","tags":["design"]},{"title":"Sam Okafor","description":"Accessibility specialist","url":"/people/sam","tags":["accessibility","audit"]}]}]
No results text
Shown and announced when nothing matches.

Everything at default

Lookout · React + TailwindFull width

Keyboard map
Keys	What happens
`⌘ K`or`Ctrl + K`	Open the search from anywhere on the page.
`↓ ↑`	Move through the results. The caret stays in the box, so you can keep typing.
`Enter`	Go to the highlighted result.
`Esc`	Close the search and put focus back where it was.

Take it home

React + Tailwind CSS v4: install with one command, or copy the file. Your options are already in it.

npx shadcn@latest add "/r/search.json"

Run it in your project root. It writes components/search.tsx with the options you set here. Needs Tailwind CSS v4 and a project set up for the shadcn CLI (npx shadcn@latest init).

Lookout

Test bench

Take it home