[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71419":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":15,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},71419,"kbar","timc1\u002Fkbar","timc1","fast, portable, and extensible cmd+k interface for your site","https:\u002F\u002Fkbar.vercel.app",null,"TypeScript",5215,203,17,3,0,6,9,37.93,"MIT License",false,"main",true,[25,26,27,28,29,30],"command-palette","hooks","javascript","react","shortcuts","typescript","2026-06-12 02:02:52","# kbar\n\nkbar is a simple plug-n-play React component to add a fast, portable, and extensible \u003Ckbd>command\u003C\u002Fkbd> + \u003Ckbd>k\u003C\u002Fkbd> (command palette) interface to your site.\n\n![demo](https:\u002F\u002Fuser-images.githubusercontent.com\u002F12195101\u002F143491194-1d3ad5d6-24ac-4e6e-8867-65f643ac2d24.gif)\n\n## Background\n\n\u003Ckbd>Command\u003C\u002Fkbd> + \u003Ckbd>k\u003C\u002Fkbd> interfaces are used to create a web experience where any type of action users would be able to do via clicking can be done through a command menu.\n\nWith macOS's Spotlight and Linear's \u003Ckbd>command\u003C\u002Fkbd> + \u003Ckbd>k\u003C\u002Fkbd> experience in mind, kbar aims to be a simple\nabstraction to add a fast and extensible \u003Ckbd>command\u003C\u002Fkbd> + \u003Ckbd>k\u003C\u002Fkbd> menu to your site.\n\n## Features\n\n- Built in animations and fully customizable components\n- Keyboard navigation support; e.g. \u003Ckbd>control\u003C\u002Fkbd> + \u003Ckbd>n\u003C\u002Fkbd> or \u003Ckbd>control\u003C\u002Fkbd> + \u003Ckbd>p\u003C\u002Fkbd> for the navigation wizards\n- Keyboard shortcuts support for registering keystrokes to specific actions; e.g. hit \u003Ckbd>t\u003C\u002Fkbd>\n  for Twitter, hit \u003Ckbd>?\u003C\u002Fkbd> to immediate bring up documentation search\n- Nested actions enable creation of rich navigation experiences; e.g. hit backspace to navigate to\n  the previous action\n- Performance as a first class priority; tens of thousands of actions? No problem.\n- History management; easily add undo and redo to each action\n- Built in screen reader support\n- A simple data structure which enables anyone to easily build their own custom components\n\n### Usage\n\nHave a fully functioning command menu for your site in minutes. First, install kbar.\n\n```\nnpm install kbar\n```\n\nThere is a single provider which you will wrap your app around; you do not have to wrap your\n_entire_ app; however, there are no performance implications by doing so.\n\n```tsx\n\u002F\u002F app.tsx\nimport { KBarProvider } from \"kbar\";\n\nfunction MyApp() {\n  return (\n    \u003CKBarProvider>\n      \u002F\u002F ...\n    \u003C\u002FKBarProvider>\n  );\n}\n```\n\nLet's add a few default actions. Actions are the core of kbar – an action define what to execute\nwhen a user selects it.\n\n```tsx\n  const actions = [\n    {\n      id: \"blog\",\n      name: \"Blog\",\n      shortcut: [\"b\"],\n      keywords: \"writing words\",\n      perform: () => (window.location.pathname = \"blog\"),\n    },\n    {\n      id: \"contact\",\n      name: \"Contact\",\n      shortcut: [\"c\"],\n      keywords: \"email\",\n      perform: () => (window.location.pathname = \"contact\"),\n    },\n  ]\n\n  return (\n    \u003CKBarProvider actions={actions}>\n      \u002F\u002F ...\n    \u003C\u002FKBarProvider>\n  );\n}\n```\n\nNext, we will pull in the provided UI components from kbar:\n\n```tsx\n\u002F\u002F app.tsx\nimport {\n  KBarProvider,\n  KBarPortal,\n  KBarPositioner,\n  KBarAnimator,\n  KBarSearch,\n  useMatches,\n  NO_GROUP\n} from \"kbar\";\n\n\u002F\u002F ...\n  return (\n    \u003CKBarProvider actions={actions}>\n      \u003CKBarPortal> \u002F\u002F Renders the content outside the root node\n        \u003CKBarPositioner> \u002F\u002F Centers the content\n          \u003CKBarAnimator> \u002F\u002F Handles the show\u002Fhide and height animations\n            \u003CKBarSearch \u002F> \u002F\u002F Search input\n          \u003C\u002FKBarAnimator>\n        \u003C\u002FKBarPositioner>\n      \u003C\u002FKBarPortal>\n      \u003CMyApp \u002F>\n    \u003C\u002FKBarProvider>;\n  );\n}\n```\n\nAt this point hitting \u003Ckbd>cmd\u003C\u002Fkbd>+\u003Ckbd>k\u003C\u002Fkbd> (macOS) or \u003Ckbd>ctrl\u003C\u002Fkbd>+\u003Ckbd>k\u003C\u002Fkbd> (Linux\u002FWindows) will animate in a search input and nothing more.\n\nkbar provides a few utilities to render a performant list of search results.\n\n- `useMatches` at its core returns a flattened list of results and group name based on the current\n  search query; i.e. `[\"Section name\", Action, Action, \"Another section name\", Action, Action]`\n- `KBarResults` renders a performant virtualized list of these results\n\nCombine the two utilities to create a powerful search interface:\n\n```tsx\nimport {\n  \u002F\u002F ...\n  KBarResults,\n  useMatches,\n  NO_GROUP,\n} from \"kbar\";\n\n\u002F\u002F ...\n\u002F\u002F \u003CKBarAnimator>\n\u002F\u002F   \u003CKBarSearch \u002F>\n\u003CRenderResults \u002F>;\n\u002F\u002F ...\n\nfunction RenderResults() {\n  const { results } = useMatches();\n\n  return (\n    \u003CKBarResults\n      items={results}\n      onRender={({ item, active }) =>\n        typeof item === \"string\" ? (\n          \u003Cdiv>{item}\u003C\u002Fdiv>\n        ) : (\n          \u003Cdiv\n            style={{\n              background: active ? \"#eee\" : \"transparent\",\n            }}\n          >\n            {item.name}\n          \u003C\u002Fdiv>\n        )\n      }\n    \u002F>\n  );\n}\n```\n\nHit \u003Ckbd>cmd\u003C\u002Fkbd>+\u003Ckbd>k\u003C\u002Fkbd> (macOS) or \u003Ckbd>ctrl\u003C\u002Fkbd>+\u003Ckbd>k\u003C\u002Fkbd> (Linux\u002FWindows) and you should see a primitive command menu. kbar allows you to have full control over all\naspects of your command menu – refer to the \u003Ca href=\"https:\u002F\u002Fkbar.vercel.app\u002Fdocs\">docs\u003C\u002Fa> to get\nan understanding of further capabilities. Looking forward to see what you build.\n\n## Used by\n\nListed are some of the various usages of kbar in the wild – check them out! Create a PR to add your\nsite below.\n\n- [Outline](https:\u002F\u002Fwww.getoutline.com\u002F)\n- [zenorocha.com](https:\u002F\u002Fzenorocha.com\u002F)\n- [griko.id](https:\u002F\u002Fgriko.id\u002F)\n- [lavya.me](https:\u002F\u002Fwww.lavya.me\u002F)\n- [OlivierAlexander.com](https:\u002F\u002Folivier-alexander-com-git-master-olivierdijkstra.vercel.app\u002F)\n- [dhritigabani.me](https:\u002F\u002Fdhritigabani.me\u002F)\n- [jpedromagalhaes](https:\u002F\u002Fjpedromagalhaes.vercel.app\u002F)\n- [animo](https:\u002F\u002Fdemo.animo.id\u002F)\n- [tobyb.xyz](https:\u002F\u002Fwww.tobyb.xyz\u002F)\n- [higoralves.dev](https:\u002F\u002Fwww.higoralves.dev\u002F)\n- [coderdiaz.dev](https:\u002F\u002Fcoderdiaz.dev\u002F)\n- [NextUI](https:\u002F\u002Fnextui.org\u002F)\n- [evm.codes](https:\u002F\u002Fwww.evm.codes\u002F)\n- [filiphalas.com](https:\u002F\u002Ffiliphalas.com\u002F)\n- [benslv.dev](https:\u002F\u002Fbenslv.dev\u002F)\n- [vortex](https:\u002F\u002Fhydralite.io\u002Fvortex)\n- [ladislavprix](https:\u002F\u002Fladislavprix.cz\u002F)\n- [pixiebrix](https:\u002F\u002Fwww.pixiebrix.com\u002F)\n- [nfaustino.com](https:\u002F\u002Fnfaustino-com.vercel.app\u002F)\n- [bradleyyeo.com](https:\u002F\u002Fbradleyyeo-com.vercel.app\u002F)\n- [andredevries.dev](https:\u002F\u002Fwww.andredevries.dev\u002F)\n- [about-ebon](https:\u002F\u002Fabout-ebon.vercel.app\u002F)\n- [frankrocha.dev](https:\u002F\u002Fwww.frankrocha.dev\u002F)\n- [cameronbrill.me](https:\u002F\u002Fwww.cameronbrill.me\u002F)\n- [codaxx.ml](https:\u002F\u002Fcodaxx.ml\u002F)\n- [jeremytenjo.com](https:\u002F\u002Fjeremytenjo.com\u002F)\n- [villivald.com](https:\u002F\u002Fvillivald.com\u002F)\n- [maxthestranger](https:\u002F\u002Fcode.maxthestranger.com\u002F)\n- [koripallopaikat](https:\u002F\u002Fkoripallopaikat.com\u002F)\n- [alexcarpenter.me](https:\u002F\u002Falexcarpenter.me\u002F)\n- [hackbar](https:\u002F\u002Fgithub.com\u002FUier\u002Fhackbar)\n- [web3kbar](https:\u002F\u002Fweb3kbar.vercel.app\u002F)\n- [burakgur](https:\u002F\u002Fburakgur-com.vercel.app\u002F)\n- [ademilter.com](https:\u002F\u002Fademilter.com\u002F)\n- [anasaraid.me](https:\u002F\u002Fanasaraid.me\u002F)\n- [daniloleal.co](https:\u002F\u002Fdaniloleal.co\u002F)\n- [hyperround](https:\u002F\u002Fgithub.com\u002FheyAyushh\u002Fhyperound)\n- [Omnivore](https:\u002F\u002Fomnivore.app)\n- [tiagohermano.dev](https:\u002F\u002Ftiagohermano.dev\u002F)\n- [tryapis.com](https:\u002F\u002Ftryapis.com\u002F)\n- [fillout.com](https:\u002F\u002Ffillout.com\u002F)\n- [vinniciusgomes.dev](https:\u002F\u002Fvinniciusgomes.dev\u002F)\n\n## Contributing to kbar\n\nContributions are welcome!\n\n### New features\n\nPlease [open a new issue](https:\u002F\u002Fgithub.com\u002Ftimc1\u002Fkbar\u002Fissues) so we can discuss prior to moving\nforward.\n\n### Bug fixes\n\nPlease [open a new Pull Request](https:\u002F\u002Fgithub.com\u002Ftimc1\u002Fkbar\u002Fpulls) for the given bug fix.\n\n### Nits and spelling mistakes\n\nPlease [open a new issue](https:\u002F\u002Fgithub.com\u002Ftimc1\u002Fkbar\u002Fissues) for things like spelling mistakes\nand README tweaks – we will group the issues together and tackle them as a group. Please do not\ncreate a PR for it!\n","kbar 是一个用于在网站中快速添加可移植且可扩展的 \u003Ckbd>command\u003C\u002Fkbd> + \u003Ckbd>k\u003C\u002Fkbd> 命令面板界面的React组件。它支持内置动画、完全可定制的组件和键盘导航，同时具备快捷键绑定功能，允许用户通过简单的按键执行特定操作。此外，kbar 还提供了历史管理、屏幕阅读器支持以及对性能的高度优化，即使处理成千上万条命令也能保持流畅。适用于需要增强用户体验、简化导航或提供快捷访问途径的各种Web应用场合，特别是那些追求高效交互设计的现代化网站。",2,"2026-06-11 03:37:37","high_star"]