{"id":351868,"date":"2021-09-15T11:51:36","date_gmt":"2021-09-15T18:51:36","guid":{"rendered":"https:\/\/css-tricks.com\/?p=351868"},"modified":"2021-09-15T11:51:38","modified_gmt":"2021-09-15T18:51:38","slug":"kbar","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/kbar\/","title":{"rendered":"kbar"},"content":{"rendered":"\n

It\u2019s not every day that a new pattern emerges across the web, but I think cmd<\/code> + k<\/code> is here to stay. It\u2019s a keyboard shortcut that usually pops open a search UI and it lets you toggle settings on or off, such as dark mode. And lots of apps support it now\u2014Slack, Notion, Linear, and Sentry (my current gig) are the ones that I\u2019ve noticed lately, but I\u2019m sure tons of others have started picking up on this pattern.<\/p>\n\n\n\n\n\n\n\n

Speaking of which, this looks like a great project<\/a>:<\/p>\n\n\n\n

kbar is a fully extensible command+k interface for your site<\/p><\/blockquote>\n\n\n\n

\"\"<\/figure>\n\n\n\n

My only hope is that more websites and applications start to support it in the future\u2014with kbar being a great tool to help spread the good word about this shortcut.<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

It\u2019s not every day that a new pattern emerges across the web, but I think cmd + k is here to stay. It\u2019s a keyboard shortcut that usually pops open a search UI and it lets you toggle settings on or off, such as dark mode. And lots of apps support it now\u2014Slack, Notion, Linear, […]<\/p>\n","protected":false},"author":223806,"featured_media":351945,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Neat little tool to create a CMD+K interface.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/kbar.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":244794,"url":"https:\/\/css-tricks.com\/fun-times-css-pixel-art\/","url_meta":{"origin":351868,"position":0},"title":"Fun Times With CSS Pixel Art","date":"August 30, 2016","format":false,"excerpt":"Pixel art is one of those lost art forms that have been overshadowed by super crisp, high resolutions images. I stumbled on some pixel art while surfing around CodePen and it reminded me how awesome it is. See the Pen Pikachu pixel css by Devi Krisdiansyah (@agilBAKA) on CodePen. How\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7538,"url":"https:\/\/css-tricks.com\/ui-pattern-ideas-list-with-functions\/","url_meta":{"origin":351868,"position":1},"title":"UI Pattern Ideas: List with Functions","date":"September 27, 2010","format":false,"excerpt":"Last week I asked people to participate in a group design project on a specific design pattern: a list with functions. The premise was: The design pattern we are going to tackle is a list with functions. Think of a list of five names. The primary function of this list\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/09\/masseditmode.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365841,"url":"https:\/\/css-tricks.com\/how-to-create-block-theme-patterns-in-wordpress-6-0\/","url_meta":{"origin":351868,"position":2},"title":"How to Create Block Theme Patterns in WordPress 6.0","date":"June 1, 2022","format":false,"excerpt":"Block patterns, also frequently referred to as sections, were introduced in WordPress 5.5 to allow users to build and share predefined block layouts in the pattern directory. The directory is the home of a wide range of curated patterns designed by the WordPress community. These patterns are available in simple\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/wp-patterns-featured-image.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":155944,"url":"https:\/\/css-tricks.com\/pattern-lab\/","url_meta":{"origin":351868,"position":3},"title":"pattern lab","date":"November 13, 2013","format":false,"excerpt":"Make your own \"tiny bootstraps, for every client.\"","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":305081,"url":"https:\/\/css-tricks.com\/a-few-background-patterns-sites\/","url_meta":{"origin":351868,"position":4},"title":"A Few Background Patterns Sites","date":"March 18, 2020","format":false,"excerpt":"If I need a quick background pattern to spruce something up, I often think of the CSS3 Patterns Gallery. Some of those are pretty intense but remember they are easily editable because they are just CSS. That means you could take these bold zags and chill them out. CodePen Embed\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/chevron-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":364090,"url":"https:\/\/css-tricks.com\/optimizing-svg-patterns\/","url_meta":{"origin":351868,"position":5},"title":"Optimizing SVG Patterns to Their Smallest Size","date":"March 18, 2022","format":false,"excerpt":"I recently created a brick wall pattern as part of my #PetitePatterns series, a challenge where I create organic-looking patterns or textures in SVG within 560 bytes (or approximately the size of two tweets). To fit this constraint, I have gone through a journey that has taught me some radical\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/bricks-pattern.png?fit=1200%2C671&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/351868"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=351868"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/351868\/revisions"}],"predecessor-version":[{"id":351944,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/351868\/revisions\/351944"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/351945"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=351868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=351868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=351868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}