Command Palette
@sushindustries/uiSearch over everything the host can name, in a native dialog: substring filter, arrow keys, and the host keeps the router.
Command Palette is a search dialog over anything the host can name: type to
filter by substring, use arrow keys to move the selection, and press Enter to
choose. It wraps a native <dialog>, so focus trapping, Escape and the top
layer come from the browser, not from this code.
tanstacktanstack add https://adamjurek.com/r/tanstack/command-palette.json
shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/command-palette.jsonWhy it is built this way
A native <dialog> does the heavy lifting - showModal gives focus trapping,
Escape-to-close and a real top layer, none of which need reimplementing. What
this adds is the part dialogs do not have: a filter over everything the host
can name, and arrow-key selection over the result. Matching is plain substring
rather than fuzzy, because a palette whose first hit reorders as you type is
slower to use than one that is merely literal. The host owns the data and the
navigation - entries come in as props, the choice goes out through onSelect
- which is what keeps this installable in a project with any router.
Install
tanstack add https://adamjurek.com/r/tanstack/command-palette.jsonpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/command-palette.jsonpnpm add @sushindustries/ui @sushindustries/atomsWhat you get
| Version | 0.1.0 |
| Category | docs · Navigation |
| Files | command-palette.tsx |
| Dependencies | None |
| Also installs | iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content |
| Tags | search, keyboard, dialog, no-deps |
No runtime dependencies
It brings nothing with it beyond the stylesheet.