{"id":13406205,"url":"https://github.com/timc1/kbar","last_synced_at":"2025-05-12T05:15:53.097Z","repository":{"id":37070259,"uuid":"402205905","full_name":"timc1/kbar","owner":"timc1","description":"fast, portable, and extensible cmd+k interface for your site","archived":false,"fork":false,"pushed_at":"2025-01-31T17:37:18.000Z","size":850,"stargazers_count":5024,"open_issues_count":10,"forks_count":196,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-05-11T02:53:11.561Z","etag":null,"topics":["command-palette","hooks","javascript","react","shortcuts","typescript"],"latest_commit_sha":null,"homepage":"https://kbar.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timc1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["timc1"]}},"created_at":"2021-09-01T21:19:20.000Z","updated_at":"2025-05-10T15:59:56.000Z","dependencies_parsed_at":"2023-02-16T12:15:58.016Z","dependency_job_id":"d623ce10-1be6-4441-a0d1-dd2c1b6fc415","html_url":"https://github.com/timc1/kbar","commit_stats":{"total_commits":164,"total_committers":29,"mean_commits":5.655172413793103,"dds":0.426829268292683,"last_synced_commit":"15c747397a16cbed14e99f9549cd5433faab5e4c"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timc1%2Fkbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timc1%2Fkbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timc1%2Fkbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timc1%2Fkbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timc1","download_url":"https://codeload.github.com/timc1/kbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253509775,"owners_count":21919587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["command-palette","hooks","javascript","react","shortcuts","typescript"],"created_at":"2024-07-30T19:02:24.058Z","updated_at":"2025-05-11T02:53:20.554Z","avatar_url":"https://github.com/timc1.png","language":"TypeScript","readme":"# kbar\n\nkbar is a simple plug-n-play React component to add a fast, portable, and extensible \u003ckbd\u003ecommand\u003c/kbd\u003e + \u003ckbd\u003ek\u003c/kbd\u003e (command palette) interface to your site.\n\n![demo](https://user-images.githubusercontent.com/12195101/143491194-1d3ad5d6-24ac-4e6e-8867-65f643ac2d24.gif)\n\n## Background\n\n\u003ckbd\u003eCommand\u003c/kbd\u003e + \u003ckbd\u003ek\u003c/kbd\u003e 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\u003ecommand\u003c/kbd\u003e + \u003ckbd\u003ek\u003c/kbd\u003e experience in mind, kbar aims to be a simple\nabstraction to add a fast and extensible \u003ckbd\u003ecommand\u003c/kbd\u003e + \u003ckbd\u003ek\u003c/kbd\u003e menu to your site.\n\n## Features\n\n- Built in animations and fully customizable components\n- Keyboard navigation support; e.g. \u003ckbd\u003econtrol\u003c/kbd\u003e + \u003ckbd\u003en\u003c/kbd\u003e or \u003ckbd\u003econtrol\u003c/kbd\u003e + \u003ckbd\u003ep\u003c/kbd\u003e for the navigation wizards\n- Keyboard shortcuts support for registering keystrokes to specific actions; e.g. hit \u003ckbd\u003et\u003c/kbd\u003e\n  for Twitter, hit \u003ckbd\u003e?\u003c/kbd\u003e 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// app.tsx\nimport { KBarProvider } from \"kbar\";\n\nfunction MyApp() {\n  return (\n    \u003cKBarProvider\u003e\n      // ...\n    \u003c/KBarProvider\u003e\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: () =\u003e (window.location.pathname = \"blog\"),\n    },\n    {\n      id: \"contact\",\n      name: \"Contact\",\n      shortcut: [\"c\"],\n      keywords: \"email\",\n      perform: () =\u003e (window.location.pathname = \"contact\"),\n    },\n  ]\n\n  return (\n    \u003cKBarProvider actions={actions}\u003e\n      // ...\n    \u003c/KBarProvider\u003e\n  );\n}\n```\n\nNext, we will pull in the provided UI components from kbar:\n\n```tsx\n// app.tsx\nimport {\n  KBarProvider,\n  KBarPortal,\n  KBarPositioner,\n  KBarAnimator,\n  KBarSearch,\n  useMatches,\n  NO_GROUP\n} from \"kbar\";\n\n// ...\n  return (\n    \u003cKBarProvider actions={actions}\u003e\n      \u003cKBarPortal\u003e // Renders the content outside the root node\n        \u003cKBarPositioner\u003e // Centers the content\n          \u003cKBarAnimator\u003e // Handles the show/hide and height animations\n            \u003cKBarSearch /\u003e // Search input\n          \u003c/KBarAnimator\u003e\n        \u003c/KBarPositioner\u003e\n      \u003c/KBarPortal\u003e\n      \u003cMyApp /\u003e\n    \u003c/KBarProvider\u003e;\n  );\n}\n```\n\nAt this point hitting \u003ckbd\u003ecmd\u003c/kbd\u003e+\u003ckbd\u003ek\u003c/kbd\u003e (macOS) or \u003ckbd\u003ectrl\u003c/kbd\u003e+\u003ckbd\u003ek\u003c/kbd\u003e (Linux/Windows) 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  // ...\n  KBarResults,\n  useMatches,\n  NO_GROUP,\n} from \"kbar\";\n\n// ...\n// \u003cKBarAnimator\u003e\n//   \u003cKBarSearch /\u003e\n\u003cRenderResults /\u003e;\n// ...\n\nfunction RenderResults() {\n  const { results } = useMatches();\n\n  return (\n    \u003cKBarResults\n      items={results}\n      onRender={({ item, active }) =\u003e\n        typeof item === \"string\" ? (\n          \u003cdiv\u003e{item}\u003c/div\u003e\n        ) : (\n          \u003cdiv\n            style={{\n              background: active ? \"#eee\" : \"transparent\",\n            }}\n          \u003e\n            {item.name}\n          \u003c/div\u003e\n        )\n      }\n    /\u003e\n  );\n}\n```\n\nHit \u003ckbd\u003ecmd\u003c/kbd\u003e+\u003ckbd\u003ek\u003c/kbd\u003e (macOS) or \u003ckbd\u003ectrl\u003c/kbd\u003e+\u003ckbd\u003ek\u003c/kbd\u003e (Linux/Windows) 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://kbar.vercel.app/docs\"\u003edocs\u003c/a\u003e 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://www.getoutline.com/)\n- [zenorocha.com](https://zenorocha.com/)\n- [griko.id](https://griko.id/)\n- [lavya.me](https://www.lavya.me/)\n- [OlivierAlexander.com](https://olivier-alexander-com-git-master-olivierdijkstra.vercel.app/)\n- [dhritigabani.me](https://dhritigabani.me/)\n- [jpedromagalhaes](https://jpedromagalhaes.vercel.app/)\n- [animo](https://demo.animo.id/)\n- [tobyb.xyz](https://www.tobyb.xyz/)\n- [higoralves.dev](https://www.higoralves.dev/)\n- [coderdiaz.dev](https://coderdiaz.dev/)\n- [NextUI](https://nextui.org/)\n- [evm.codes](https://www.evm.codes/)\n- [filiphalas.com](https://filiphalas.com/)\n- [benslv.dev](https://benslv.dev/)\n- [vortex](https://hydralite.io/vortex)\n- [ladislavprix](https://ladislavprix.cz/)\n- [pixiebrix](https://www.pixiebrix.com/)\n- [nfaustino.com](https://nfaustino-com.vercel.app/)\n- [bradleyyeo.com](https://bradleyyeo-com.vercel.app/)\n- [andredevries.dev](https://www.andredevries.dev/)\n- [about-ebon](https://about-ebon.vercel.app/)\n- [frankrocha.dev](https://www.frankrocha.dev/)\n- [cameronbrill.me](https://www.cameronbrill.me/)\n- [codaxx.ml](https://codaxx.ml/)\n- [jeremytenjo.com](https://jeremytenjo.com/)\n- [villivald.com](https://villivald.com/)\n- [maxthestranger](https://code.maxthestranger.com/)\n- [koripallopaikat](https://koripallopaikat.com/)\n- [alexcarpenter.me](https://alexcarpenter.me/)\n- [hackbar](https://github.com/Uier/hackbar)\n- [web3kbar](https://web3kbar.vercel.app/)\n- [burakgur](https://burakgur-com.vercel.app/)\n- [ademilter.com](https://ademilter.com/)\n- [anasaraid.me](https://anasaraid.me/)\n- [daniloleal.co](https://daniloleal.co/)\n- [hyperround](https://github.com/heyAyushh/hyperound)\n- [Omnivore](https://omnivore.app)\n- [tiagohermano.dev](https://tiagohermano.dev/)\n- [tryapis.com](https://tryapis.com/)\n- [fillout.com](https://fillout.com/)\n- [vinniciusgomes.dev](https://vinniciusgomes.dev/)\n\n## Contributing to kbar\n\nContributions are welcome!\n\n### New features\n\nPlease [open a new issue](https://github.com/timc1/kbar/issues) so we can discuss prior to moving\nforward.\n\n### Bug fixes\n\nPlease [open a new Pull Request](https://github.com/timc1/kbar/pulls) for the given bug fix.\n\n### Nits and spelling mistakes\n\nPlease [open a new issue](https://github.com/timc1/kbar/issues) 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","funding_links":["https://github.com/sponsors/timc1"],"categories":["TypeScript","UI Components","Libraries","Packages","Uncategorized"],"sub_categories":["Command palette","React","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimc1%2Fkbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimc1%2Fkbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimc1%2Fkbar/lists"}