Search & Command Components
The Cmd+K palette has become the signature of a serious web app, and it is mostly interaction detail: the scale-up on open, the highlight that slides between results, the flash on Enter. These components ship those details finished, alongside the search patterns that surround them.
5 UI elements · no build step
£50
Every current and future premium UI element. 33 today, and every one we add to this line.
£99
All three lines: 65 effects, 54 templates and 33 UI elements. 152 today, plus everything we release next.
What separates a palette from a filtered list
A command palette is judged in the first half second: does Cmd+K open it from anywhere, does typing filter instantly, does Enter do the thing. The palette here binds its shortcut on the document so it works wherever focus is, runs a fuzzy subsequence match on every keystroke, and keeps the selection highlight tweening between visible rows instead of snapping, which is the detail that makes it feel native rather than rebuilt.
The family covers the spectrum from app chrome to page furniture. Spotlight-style global search and the palette suit apps and documentation; the autocomplete dropdown is the classic form pattern with its suggestion list animated in and keyboard-navigable; the filter chip bar and sortable data table bring the same motion language to result filtering, with rows that reorder visibly rather than teleporting.
Everything filters client-side over the rows you render, which is the honest scope for a copy-paste component: there is no backend to configure and no index to build. Wire the rows to your data, or intercept the input event and fetch, and the animation layer does not care where the entries came from.
Keyboard support is complete because these are keyboard-first patterns: arrows move selection, Enter commits, Escape closes and returns focus, and the selection only ever lands on a visible row. Reduced motion drops the durations to zero without changing any behaviour.
How to put a command palette in your app
The palette and its siblings are static files with their entries as plain markup rows. Integration is pasting the shell, then filling it with your own entries.
- 01
Copy the three includes
Stylesheet, the GSAP CDN tag the component was built against, then the component script. The keyboard shortcut binds on load.
- 02
Paste the shell markup
The launcher button and the overlay window are separate pieces, and both are optional: ship the window alone and the palette is simply always on screen.
- 03
Replace the rows with your commands
Entries are plain list items with a label and an action href or handler. The fuzzy filter reads whatever rows exist, so adding a command is adding a row.
- 04
Pick a variant, then retune its tokens
Surface, backdrop, accent and the Enter flash colour are custom properties per variant, read at runtime, so a new look never needs a script change.
body[data-variant="paper"] {
--surface: #f7f4ec;
--ink: #16161a;
--accent: #4338ca; /* selection, flash */
--backdrop: rgba(20, 20, 24, 0.35);
}Search & Command at a glance
| Component | What it does | Built with | Price |
|---|---|---|---|
| Cmd+K Command Palette | Keyboard-first command palette: Cmd+K launcher, fuzzy filtering as you type, arrow-key selection and Enter to run. | GSAP core | £5 |
| Autocomplete Search Dropdown | Search field over a grouped list: rows filter as you type with the matched characters marked, a highlight slides under the arrow keys, and Enter fills the field. | GSAP core | £5 |
| Spotlight Global Search | Site-wide search launched from a header button or the / key: the button morphs into a centred spotlight panel over a blurred backdrop, with grouped results and full keyboard control. | GSAP core | £5 |
| Filter Chip Bar | A scrollable row of multi-select filter chips over a results grid: each chip opens a tick, the row carries its own drawn scrollbar, the grid re-flows with GSAP Flip and the results count counts to its new number. | Flip | £5 |
| Sortable Data Table | A data table with sortable header buttons, a rotating direction arrow and a subtle column highlight: rows re-order with GSAP Flip so each one visibly travels to its new place. | Flip | £5 |
Frequently Asked Questions
Does the command palette need a backend or search index?
No. Filtering is a client-side fuzzy match over the rows in the markup. For dynamic results, populate the rows from your own data or fetch on input; the animation and keyboard layer are indifferent to where entries come from.
Will Cmd+K clash with the browser or my other shortcuts?
The binding checks for the platform modifier and only intercepts its own combination, and the shortcut is defined in one place at the top of the script if you want a different one. Ctrl+K is handled for Windows and Linux.
How many rows can the table and palette handle?
They animate DOM rows, so they are built for the hundreds, not the hundreds of thousands. Client-side filtering over a few hundred entries is instant; past that, fetch filtered results and render fewer rows.
Can I use these in a commercial product?
Yes. The standard license covers unlimited personal and commercial projects. The only restrictions are no redistribution of the component itself and no competing component library.
