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

~~£99~~£79.20

Halloween: 20% off the Vault until 31 October. Ends in 15d 15h 17m 04s

UI Elements Pass

£50

Every current and future premium UI element and component kit. Includes all 48 premium UI elements and kits available now, plus every future release in this line.

The Vault

£79.20

All 295 premium items in the Vault library, plus future additions to the library.

ui-007 £10

Cmd+K Command Palette

A Cmd+K command palette: fuzzy filtering, nested pages that slide in with a breadcrumb, and a panel height that morphs as results change.

micro-interactioncommand-palette

ui-015 £10

Autocomplete Search Dropdown

An autocomplete search dropdown: grouped results filter as you type with matches highlighted, a highlight slides under the arrow keys.

micro-interactionfuzzy-search

ui-021 £10

Spotlight Search Modal

A spotlight search modal for apps and docs: opened from the search field or the / key, with grouped results, a preview and full keyboard control.

morphingdialog-animation

ui-022 £10

Filter Chips

Filter chips for product and portfolio grids: multi-select chips above results that re-flow with GSAP Flip while the count animates.

Flip flip-filter

ui-023 £10

Sortable Data Table

A sortable data table for dashboards: row selection, a bulk-action bar with Undo, filter and pagination, and rows that travel with GSAP Flip.

Flip reorder

Browse all 59 UI elements

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.

1

Copy the three includes

Stylesheet, the GSAP CDN tag the component was built against, then the component script. The keyboard shortcut binds on load.
2

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.
3

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.
4

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.

The variant block you edit

body[data-variant="paper"] {
  --surface: #f7f4ec;
  --ink: #16161a;
  --accent: #4338ca;   /* selection, flash */
  --backdrop: rgba(20, 20, 24, 0.35);
}

Search & Command at a glance

Compare the 5 components in this category by what they do, what they are built with, and price.
Component	What it does	Built with	Price
Cmd+K Command Palette	A Cmd+K command palette: fuzzy filtering, nested pages that slide in with a breadcrumb, and a panel height that morphs as results change.	GSAP core	£10
Autocomplete Search Dropdown	An autocomplete search dropdown: grouped results filter as you type with matches highlighted, a highlight slides under the arrow keys.	GSAP core	£10
Spotlight Search Modal	A spotlight search modal for apps and docs: opened from the search field or the / key, with grouped results, a preview and full keyboard control.	GSAP core	£10
Filter Chips	Filter chips for product and portfolio grids: multi-select chips above results that re-flow with GSAP Flip while the count animates.	Flip	£10
Sortable Data Table	A sortable data table for dashboards: row selection, a bulk-action bar with Undo, filter and pagination, and rows that travel with GSAP Flip.	Flip	£10

Related guides

59 animated UI components built with GSAP (2026)

59 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Eleven are completely free to download.

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.

Browse all UI elements What GSAP UI elements are