{"id":13606930,"url":"https://github.com/albingroen/react-cmdk","last_synced_at":"2025-05-14T21:07:11.824Z","repository":{"id":37403566,"uuid":"425973126","full_name":"albingroen/react-cmdk","owner":"albingroen","description":"A fast, accessible, and pretty command palette for React","archived":false,"fork":false,"pushed_at":"2024-06-19T03:19:11.000Z","size":1585,"stargazers_count":1170,"open_issues_count":8,"forks_count":46,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-10T01:04:24.047Z","etag":null,"topics":["headlessui","react","tailwindcss","tsdx","typescript"],"latest_commit_sha":null,"homepage":"https://react-cmdk.com","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/albingroen.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":["albingroen"]}},"created_at":"2021-11-08T19:49:13.000Z","updated_at":"2025-04-29T12:08:13.000Z","dependencies_parsed_at":"2024-06-18T15:28:32.452Z","dependency_job_id":"63a3aa33-a921-4e1f-8aa1-f4b9db8416e9","html_url":"https://github.com/albingroen/react-cmdk","commit_stats":{"total_commits":118,"total_committers":4,"mean_commits":29.5,"dds":0.0423728813559322,"last_synced_commit":"48021dc6a151546a4d71840b258092dcc714d1fe"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albingroen%2Freact-cmdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albingroen%2Freact-cmdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albingroen%2Freact-cmdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albingroen%2Freact-cmdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/albingroen","download_url":"https://codeload.github.com/albingroen/react-cmdk/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254227612,"owners_count":22035669,"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":["headlessui","react","tailwindcss","tsdx","typescript"],"created_at":"2024-08-01T19:01:13.886Z","updated_at":"2025-05-14T21:07:06.803Z","avatar_url":"https://github.com/albingroen.png","language":"TypeScript","funding_links":["https://github.com/sponsors/albingroen"],"categories":["Libraries","TypeScript"],"sub_categories":["React"],"readme":"\u003cimg width=\"750\" src=\"https://res.cloudinary.com/albin-groen/image/upload/v1654800612/react-cmdk-og_yyd4kb.png\" /\u003e\n\n# A command palette for React\n\nA package with components for building your dream command palette for your web application.\n\nWatch the [YouTube demo](https://www.youtube.com/watch?v=FN8noNclyoU) or [try it out here](https://react-cmdk.com) to get started.\n\n- [Features](#features)\n- [Installation](#installation)\n- [Example usage](#example-usage)\n  - [Opening the command palette](#opening-the-command-palette)\n- [API](#api)\n- [Utils](#utils)\n- [Maintainers](#maintainers)\n\n## Features\n\n✓ Accessible\n\u003cbr /\u003e\n✓ Flexible\n\u003cbr /\u003e\n✓ Good looking\n\u003cbr /\u003e\n✓ Very fast\n\u003cbr /\u003e\n✓ Dark \u0026 light mode\n\n## Installation\n\n```\nnpm install react-cmdk\n```\n\nOr if you'd rather use Yarn\n\n```\nyarn add react-cmdk\n```\n\n## Example usage\n\nYou can compose your command palette pretty much however you like with the\nincluded components. But here is an example of a command palette that uses some\nof the included helpers for a very neat solution.\n\n```typescript\nimport \"react-cmdk/dist/cmdk.css\";\nimport CommandPalette, { filterItems, getItemIndex } from \"react-cmdk\";\nimport { useState } from \"react\";\n\nconst Example = () =\u003e {\n  const [page, setPage] = useState\u003c\"root\" | \"projects\"\u003e(\"root\");\n  const [open, setOpen] = useState\u003cboolean\u003e(true);\n  const [search, setSearch] = useState(\"\");\n\n  const filteredItems = filterItems(\n    [\n      {\n        heading: \"Home\",\n        id: \"home\",\n        items: [\n          {\n            id: \"home\",\n            children: \"Home\",\n            icon: \"HomeIcon\",\n            href: \"#\",\n          },\n          {\n            id: \"settings\",\n            children: \"Settings\",\n            icon: \"CogIcon\",\n            href: \"#\",\n          },\n          {\n            id: \"projects\",\n            children: \"Projects\",\n            icon: \"RectangleStackIcon\",\n            closeOnSelect: false,\n            onClick: () =\u003e {\n              setPage(\"projects\");\n            },\n          },\n        ],\n      },\n      {\n        heading: \"Other\",\n        id: \"advanced\",\n        items: [\n          {\n            id: \"developer-settings\",\n            children: \"Developer settings\",\n            icon: \"CodeBracketIcon\",\n            href: \"#\",\n          },\n          {\n            id: \"privacy-policy\",\n            children: \"Privacy policy\",\n            icon: \"LifebuoyIcon\",\n            href: \"#\",\n          },\n          {\n            id: \"log-out\",\n            children: \"Log out\",\n            icon: \"ArrowRightOnRectangleIcon\",\n            onClick: () =\u003e {\n              alert(\"Logging out...\");\n            },\n          },\n        ],\n      },\n    ],\n    search\n  );\n\n  return (\n    \u003cCommandPalette\n      onChangeSearch={setSearch}\n      onChangeOpen={setOpen}\n      search={search}\n      isOpen={open}\n      page={page}\n    \u003e\n      \u003cCommandPalette.Page id=\"root\"\u003e\n        {filteredItems.length ? (\n          filteredItems.map((list) =\u003e (\n            \u003cCommandPalette.List key={list.id} heading={list.heading}\u003e\n              {list.items.map(({ id, ...rest }) =\u003e (\n                \u003cCommandPalette.ListItem\n                  key={id}\n                  index={getItemIndex(filteredItems, id)}\n                  {...rest}\n                /\u003e\n              ))}\n            \u003c/CommandPalette.List\u003e\n          ))\n        ) : (\n          \u003cCommandPalette.FreeSearchAction /\u003e\n        )}\n      \u003c/CommandPalette.Page\u003e\n\n      \u003cCommandPalette.Page id=\"projects\"\u003e\n        {/* Projects page */}\n      \u003c/CommandPalette.Page\u003e\n    \u003c/CommandPalette\u003e\n  );\n};\n\nexport default Example;\n```\n\n### Opening the command palette\n\nThe package does include a helper hook for opening the command palette,\nbut you can actually open it however you want. Here are some examples.\n\n#### Helper\n\n```typescript\nconst [isOpen, setIsOpen] = useState\u003cboolean\u003e(false);\n\nuseHandleOpenCommandPalette(setIsOpen);\n```\n\n#### Custom\n\n```typescript\nconst [isOpen, setIsOpen] = useState\u003cboolean\u003e(false);\n\nuseEffect(() =\u003e {\n  function handleKeyDown(e: KeyboardEvent) {\n    if (\n      (navigator?.platform?.toLowerCase().includes(\"mac\")\n        ? e.metaKey\n        : e.ctrlKey) \u0026\u0026\n      e.key === \"k\"\n    ) {\n      e.preventDefault();\n      e.stopPropagation();\n\n      setIsOpen((currentValue) =\u003e {\n        return !currentValue;\n      });\n    }\n  }\n\n  document.addEventListener(\"keydown\", handleKeyDown);\n\n  return () =\u003e {\n    document.removeEventListener(\"keydown\", handleKeyDown);\n  };\n}, []);\n```\n\n## API\n\n### `CommandPalette`\n\n| name             | type                     | required | default    | description                                 |\n| ---------------- | ------------------------ | -------- | ---------- | ------------------------------------------- |\n| onChangeSearch   | (value: string) =\u003e void  | true     |            | Function for setting search value           |\n| onChangeOpen     | (value: boolean) =\u003e void | true     |            | Function for setting open state             |\n| children         | React.ReactNode          | true     |            | Children of command palette                 |\n| isOpen           | boolean                  | true     |            | Open state                                  |\n| search           | string                   | true     |            | Search state                                |\n| placeholder      | string                   | false    | `\"Search\"` | Search field placeholder                    |\n| page             | string                   | false    |            | The current page id                         |\n| renderLink       | RenderLink               | false    |            | Function for customizing rendering of links |\n| footer           | React.ReactNode          | false    |            | Footer component                            |\n| selected         | number                   | false    |            | The current selected item index             |\n| onChangeSelected | (value: number) =\u003e void  | false    |            | Function for setting selected item index    |\n\n### `CommandPalette.Page`\n\nFYI. Using pages is completely optional\n\n| name         | type            | required | default | description                             |\n| ------------ | --------------- | -------- | ------- | --------------------------------------- |\n| id           | string          | true     |         | A unique page id                        |\n| children     | React.ReactNode | true     |         | Children of the list                    |\n| searchPrefix | string[]        | false    |         | Prefix to the left of the search bar    |\n| onEscape     | () =\u003e void      | false    |         | Function that runs upon clicking escape |\n\n### `CommandPalette.List`\n\n| name     | type            | required | default | description          |\n| -------- | --------------- | -------- | ------- | -------------------- |\n| children | React.ReactNode | true     |         | Children of the list |\n| heading  | string          | false    |         | Heading of the list  |\n\n### `CommandPalette.ListItem`\n\n| name          | type                 | required | default    | description                                     |\n| ------------- | -------------------- | -------- | ---------- | ----------------------------------------------- |\n| index         | number               | true     |            | Index for list item                             |\n| closeOnSelect | boolean              | false    |            | Whether to close the command palette upon click |\n| icon          | (IconName, React.FC) | false    | `false`    | Icon for list item                              |\n| iconType      | IconType             | false    | `\"solid\" ` | Icon for list item                              |\n| showType      | boolean              | false    | true       | Whether to show the item type                   |\n| disabled      | boolean              | false    |            | Whether the item is disabled                    |\n| keywords      | Array\u003cstring\u003e        | false    |            | Underlying search keywords for the list item    |\n\nThe list item also extends the `HTMLAnchorElement \u0026 HTMLButtonElement` types\n\n### `CommandPalette.FreeSearchAction`\n\n| name  | type   | required | default        | description         |\n| ----- | ------ | -------- | -------------- | ------------------- |\n| index | number | false    | `0`            | Index for list item |\n| label | string | false    | `\"Search for\"` | Button label        |\n\nThe search action also extends the `HTMLAnchorElement \u0026 HTMLButtonElement` types\n\n### `RenderLink`\n\n```typescript\n(\n  props: DetailedHTMLProps\u003c\n    AnchorHTMLAttributes\u003cHTMLAnchorElement\u003e,\n    HTMLAnchorElement\n  \u003e\n) =\u003e ReactNode;\n```\n\n### `JsonStructure`\n\nArray of\n\n| name    | type                       | required | default | description      |\n| ------- | -------------------------- | -------- | ------- | ---------------- |\n| id      | string                     | true     |         | Id for list      |\n| items   | Array\u003c`JsonStructureItem`\u003e | true     |         | Items for list   |\n| heading | string                     | false    |         | Heading for list |\n\n### `JsonStructureItem`\n\n`CommandPalette.ListItem`\n\nOmits `index` \u0026 extends\n\n| name | type   | required | default | description      |\n| ---- | ------ | -------- | ------- | ---------------- |\n| id   | string | true     |         | Id for list item |\n\n## Utils\n\n### `getItemIndex`\n\nA function for getting the current index of a item within the json structure\n\n```typescript\n(items: JsonStructure, listItemId: string, startIndex = 0) =\u003e number;\n```\n\n### `filterItems`\n\nA function for filtering the json structure from a search string\n\n```typescript\n(\n  items: JsonStructure,\n  search: string,\n  options?: { filterOnListHeading: boolean }\n) =\u003e JsonStructure;\n```\n\n### `renderJsonStructure`\n\nA function for rendering a json structure\n\n```typescript\n(items: JsonStructure) =\u003e JSX.Element[]\n```\n\n### `useHandleOpenCommandPalette`\n\n```typescript\n(fn: React.Dispatch\u003cReact.SetStateAction\u003cboolean\u003e\u003e) =\u003e void\n```\n\n## Maintainers\n\n\u003ca href=\"https://github.com/albingroen\"\u003e \n  \u003cimg src=\"https://avatars.githubusercontent.com/u/19674362?v=4\" width=\"80\" height=\"80\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbingroen%2Freact-cmdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falbingroen%2Freact-cmdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbingroen%2Freact-cmdk/lists"}