Last updated on:
Updated on:
Command Palette for Framer Projects (cmdK)
Simple command palette for fast website search and navigation. Automatically detect available pages and CMS content, save recent searches and activities, and quickly discover relevant content across your website up to 100 search results.
Variants:
1
Theme:
Please note: This component is available only for active license holders. Sign in with your license key or purchase one.
Copying disabled
How to use the component?
1. Drop in the palette and give it a hotkey
Copy and drop the Command Palette anywhere on your page, it renders a search bar, button, or icon (or nothing at all, if you only want the hotkey) and stays fixed in place while the overlay itself portals to the top of the document, so it always sits above your content.
Unable to copy? Sign in and try again, or you can buy it for just $7 from Framer Marketplace.
Set Hotkey to ⌘K / Ctrl K, a custom key combo, or a plain "/" shortcut, or turn it off and rely on the visible trigger only. The hotkey is ignored on the canvas so it never fights the Framer editor, and it activates automatically once the page is published.
To auto-index all the website content, just drop it on the page and turn on the Index Site toggle.
The command palette UI auto-shifts to the mobile version on mobile breakpoints. No manual toggling is required.
2. Feed it manual links, CMS content, and every page on your site
Add manual entries straight in the Items panel, each with a title, subtitle, group, emoji or icon, keywords, and an action of Go to Link, Copy Text, or Fire Event. Groups become the headings visitors see in the results list.
To index CMS collections, go to Scopes and set the main page path (for example /library/). All the pages that come under this main page slug will be displayed in the search. This is ideal for CMS pages to display one CMS collection at a time. If you want to link multiple collections under a single command palette, you can add more collections to it.
Turn on Index Site to pull in every published page automatically from your sitemap, no manual list to maintain as pages get added or removed.
Results are ranked with fuzzy matching across title, subtitle, keywords, and group, so a visitor typing "pricng" still finds "Pricing".
Turn on Recents to remember each visitor's last picks between sessions, and use Max Results to cap how many rows show at once, up to 100.
3. Style it and wire up selection events
Theme controls cover panel background, border, text, muted text, accent (the highlighted match color), selected row background, overlay color and blur, corner radius, width, and max height so that the palette can match Light, Dark, or any custom brand look.
Use the Canvas toggle to preview the open panel directly in the Framer editor while you style it, it does not affect the live site. Placeholder, empty state text, footer hint, and the recents heading are all editable in Content.
Full keyboard support is built in: arrow keys and Tab move between results, Enter selects, Escape closes and restores focus to whatever was focused before opening. Wire the On Select event handler to fire your own logic, such as analytics tracking, whenever a visitor picks a result.
For the React code of this command palette, sign in with a Standard plan.
Where to use?
Use it anywhere visitors need to jump around a large site fast. It fits naturally in a navigation bar or header as a search trigger, on documentation and knowledge base sites where people search for articles by keyword, and on content-heavy blogs or publications where a CMS-bound palette surfaces every post without a dedicated search page.
It also works well as an in-app command menu for SaaS dashboards and internal tools, giving users a ⌘K shortcut to jump straight to settings, records, or actions instead of clicking through menus, and as a quick-navigation layer for marketplaces, directories, or portfolio sites with many pages or listings.
Because it can index your entire sitemap automatically, it is especially strong on sites that grow over time, new pages and CMS entries become searchable the moment they are published, with no manual list to keep in sync.
LIMITED TIME OFFER
Launch amazing websites with
Framerstacks
Still trying to design and launch a website from scratch? Check out 800+ pre-built Framer components and sections that 10x your design speed.
Life time access
Save hundreds of hours
10x design speed
Weekly new releases
Premium designs
Color theme responsiveness
Starts from
$79.00
$99
One-time
Command Palette for Framer Projects (cmdK)
Simple command palette for fast website search and navigation. Automatically detect available pages and CMS content, save recent searches and activities, and quickly discover relevant content across your website up to 100 search results.
Variants:
1
Theme:
Please note: This component is available only for active license holders. Sign in with your license key or purchase one.
Copying disabled
How to use the component?
1. Drop in the palette and give it a hotkey
Copy and drop the Command Palette anywhere on your page, it renders a search bar, button, or icon (or nothing at all, if you only want the hotkey) and stays fixed in place while the overlay itself portals to the top of the document, so it always sits above your content.
Unable to copy? Sign in and try again, or you can buy it for just $7 from Framer Marketplace.
Set Hotkey to ⌘K / Ctrl K, a custom key combo, or a plain "/" shortcut, or turn it off and rely on the visible trigger only. The hotkey is ignored on the canvas so it never fights the Framer editor, and it activates automatically once the page is published.
To auto-index all the website content, just drop it on the page and turn on the Index Site toggle.
The command palette UI auto-shifts to the mobile version on mobile breakpoints. No manual toggling is required.
2. Feed it manual links, CMS content, and every page on your site
Add manual entries straight in the Items panel, each with a title, subtitle, group, emoji or icon, keywords, and an action of Go to Link, Copy Text, or Fire Event. Groups become the headings visitors see in the results list.
To index CMS collections, go to Scopes and set the main page path (for example /library/). All the pages that come under this main page slug will be displayed in the search. This is ideal for CMS pages to display one CMS collection at a time. If you want to link multiple collections under a single command palette, you can add more collections to it.
Turn on Index Site to pull in every published page automatically from your sitemap, no manual list to maintain as pages get added or removed.
Results are ranked with fuzzy matching across title, subtitle, keywords, and group, so a visitor typing "pricng" still finds "Pricing".
Turn on Recents to remember each visitor's last picks between sessions, and use Max Results to cap how many rows show at once, up to 100.
3. Style it and wire up selection events
Theme controls cover panel background, border, text, muted text, accent (the highlighted match color), selected row background, overlay color and blur, corner radius, width, and max height so that the palette can match Light, Dark, or any custom brand look.
Use the Canvas toggle to preview the open panel directly in the Framer editor while you style it, it does not affect the live site. Placeholder, empty state text, footer hint, and the recents heading are all editable in Content.
Full keyboard support is built in: arrow keys and Tab move between results, Enter selects, Escape closes and restores focus to whatever was focused before opening. Wire the On Select event handler to fire your own logic, such as analytics tracking, whenever a visitor picks a result.
For the React code of this command palette, sign in with a Standard plan.
Where to use?
Use it anywhere visitors need to jump around a large site fast. It fits naturally in a navigation bar or header as a search trigger, on documentation and knowledge base sites where people search for articles by keyword, and on content-heavy blogs or publications where a CMS-bound palette surfaces every post without a dedicated search page.
It also works well as an in-app command menu for SaaS dashboards and internal tools, giving users a ⌘K shortcut to jump straight to settings, records, or actions instead of clicking through menus, and as a quick-navigation layer for marketplaces, directories, or portfolio sites with many pages or listings.
Because it can index your entire sitemap automatically, it is especially strong on sites that grow over time, new pages and CMS entries become searchable the moment they are published, with no manual list to keep in sync.
LIMITED TIME OFFER
Launch amazing websites with
Framerstacks
Still trying to design and launch a website from scratch? Check out 800+ pre-built Framer components and sections that 10x your design speed.
Life time access
Save hundreds of hours
10x design speed
Weekly new releases
Premium designs
Color theme responsiveness
Starts from
$79.00
$99
One-time
Library overview
Framerstacks hosts one of the largest collections of pre-built Framer components and website sections. With 200+ professionally designed components and 800+ variants.
Our library spans 40+ webpage section categories, enabling creators to build beautiful, high-performance websites in Framer faster than ever.
Explore the main library page.
Contribution
Have something creative on your mind? Or wish to become a contributor inside Framerstacks?
You're welcome. Join as a contributor and help to shape the future of the high-quality Framer components and sections gallery. Head over to the submission page and contribute.
Support
If you need any further support related to this specific component or section, please send an email to hello@framerstacks.com
One of our customer support team members will get in touch with you within 24 hours.
To report an issue with the product, purchase, functionality, submit a ticket.
Just like more components
Smooth Scroll Effect for Framer Web Pages
Oct 2, 2026
Scattered Text Grid Animation for Framer
Oct 2, 2026
Decrypt Revealer for Framer Pages
Oct 2, 2026
Infinite 3D Image Tunnel for Framer
Oct 2, 2026
3D Bend Page Effect Code Component for Framer
Oct 2, 2026
Testimonial Carousel Component for Framer
Oct 2, 2026
Page Transition Manager Code for Framer
Oct 2, 2026
Liquid Text Distortion Effect for Framer
Oct 2, 2026
Circular 3D Image Gallery Component for Framer
Oct 2, 2026
3D Flip Social Media Icons Component for Framer
Oct 2, 2026
Blog Read Time Calculator Component for Framer
Oct 2, 2026
Hashtag Generator Tool Component for Framer
Oct 2, 2026
Load More
Smooth Scroll Effect for Framer Web Pages
Oct 2, 2026
Scattered Text Grid Animation for Framer
Oct 2, 2026
Decrypt Revealer for Framer Pages
Oct 2, 2026
Infinite 3D Image Tunnel for Framer
Oct 2, 2026
3D Bend Page Effect Code Component for Framer
Oct 2, 2026
Testimonial Carousel Component for Framer
Oct 2, 2026
Load More
The FAQs
Have questions? We got you…
Everything you need to know about our product and billing.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 80 146" xmlns="http://www.w3.org/2000/svg"><path d="M 58.236 38.932 C 58.236 33.434 56.415 29.023 52.774 25.699 C 49.132 22.374 44.305 20.712 38.29 20.712 C 34.583 20.712 31.228 21.513 28.226 23.113 C 25.224 24.714 22.633 27.046 20.455 30.11 C 18.409 33.05 15.627 34.746 12.108 35.196 C 8.59 35.646 5.555 34.718 3.003 32.411 C 1.213 30.749 0.223 28.703 0.034 26.274 C -0.155 23.845 0.451 21.543 1.852 19.37 C 5.943 13.233 11.155 8.472 17.486 5.086 C 23.817 1.7 30.752 0.005 38.29 0 C 50.692 0 60.762 3.516 68.5 10.548 C 76.237 17.58 80.104 26.785 80.099 38.164 C 80.099 43.918 78.884 49.096 76.455 53.699 C 74.026 58.301 69.551 63.735 63.03 70 C 58.299 74.475 55.103 77.96 53.441 80.456 C 51.779 82.952 50.692 85.795 50.181 88.986 C 49.669 92.055 48.358 94.612 46.245 96.658 C 44.133 98.703 41.609 99.726 38.674 99.726 C 35.738 99.726 33.214 98.737 31.102 96.757 C 28.99 94.778 27.934 92.316 27.934 89.37 C 27.934 84.384 29.021 79.814 31.194 75.662 C 33.368 71.509 37.012 67.129 42.126 62.521 C 48.646 56.767 52.963 52.326 55.075 49.196 C 57.187 46.066 58.241 42.644 58.236 38.932 M 38.261 145.607 C 34.042 145.607 30.431 144.106 27.429 141.104 C 24.427 138.102 22.924 134.489 22.919 130.264 C 22.913 126.04 24.417 122.43 27.429 119.433 C 30.441 116.436 34.052 114.932 38.261 114.922 C 42.47 114.912 46.083 116.415 49.1 119.433 C 52.118 122.45 53.619 126.061 53.604 130.264 C 53.588 134.468 52.087 138.081 49.1 141.104 C 46.114 144.126 42.501 145.627 38.261 145.607" fill="rgb(219, 219, 219)" height="145.6071412712696px" id="yQXBZZpLX" width="80.09859047311576px"/></svg>)
What is Framerstack?
Is there a free plan available?
What about the refund policy?
How I can avail my user license?
Still have questions? Or can't find the right answer? Please contact us. One of our customer support team members will get in touch with you.
Join to the community
Stay in the loop with everything you need to know.
By clicking Submit, you agree to our Privacy Policy and to receive our notifications. You can Unsubscribe anytime.
By clicking Submit, you agree to our Privacy Policy and to receive our notifications. You can Unsubscribe anytime.