[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10119":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":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},10119,"cmdk","dip\u002Fcmdk","dip","Fast, unstyled command menu React component.","",null,"TypeScript",12666,372,26,50,0,1,14,83,8,42.72,"MIT License",false,"main",[26,27,28,29,30],"combobox","command-menu","command-palette","radix-ui","react","2026-06-12 02:02:17","\u003Cp align=\"center\">\n\u003Cimg src=\".\u002Fwebsite\u002Fpublic\u002Fog.png\" \u002F>\n\u003C\u002Fp>\n\n# ⌘K [![cmdk minzip package size](https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002Fcmdk)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcmdk?activeTab=code) [![cmdk package version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fcmdk.svg?colorB=green)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcmdk)\n\n⌘K is a command menu React component that can also be used as an accessible combobox. You render items, it filters and sorts them automatically. ⌘K supports a fully composable API \u003Csup>\u003Csup>[How?](\u002FARCHITECTURE.md)\u003C\u002Fsup>\u003C\u002Fsup>, so you can wrap items in other components or even as static JSX.\n\n## Install\n\n```bash\npnpm install cmdk\n```\n\n## Use\n\n```tsx\nimport { Command } from 'cmdk'\n\nconst CommandMenu = () => {\n  return (\n    \u003CCommand label=\"Command Menu\">\n      \u003CCommand.Input \u002F>\n      \u003CCommand.List>\n        \u003CCommand.Empty>No results found.\u003C\u002FCommand.Empty>\n\n        \u003CCommand.Group heading=\"Letters\">\n          \u003CCommand.Item>a\u003C\u002FCommand.Item>\n          \u003CCommand.Item>b\u003C\u002FCommand.Item>\n          \u003CCommand.Separator \u002F>\n          \u003CCommand.Item>c\u003C\u002FCommand.Item>\n        \u003C\u002FCommand.Group>\n\n        \u003CCommand.Item>Apple\u003C\u002FCommand.Item>\n      \u003C\u002FCommand.List>\n    \u003C\u002FCommand>\n  )\n}\n```\n\nOr in a dialog:\n\n```tsx\nimport { Command } from 'cmdk'\n\nconst CommandMenu = () => {\n  const [open, setOpen] = React.useState(false)\n\n  \u002F\u002F Toggle the menu when ⌘K is pressed\n  React.useEffect(() => {\n    const down = (e) => {\n      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener('keydown', down)\n    return () => document.removeEventListener('keydown', down)\n  }, [])\n\n  return (\n    \u003CCommand.Dialog open={open} onOpenChange={setOpen} label=\"Global Command Menu\">\n      \u003CCommand.Input \u002F>\n      \u003CCommand.List>\n        \u003CCommand.Empty>No results found.\u003C\u002FCommand.Empty>\n\n        \u003CCommand.Group heading=\"Letters\">\n          \u003CCommand.Item>a\u003C\u002FCommand.Item>\n          \u003CCommand.Item>b\u003C\u002FCommand.Item>\n          \u003CCommand.Separator \u002F>\n          \u003CCommand.Item>c\u003C\u002FCommand.Item>\n        \u003C\u002FCommand.Group>\n\n        \u003CCommand.Item>Apple\u003C\u002FCommand.Item>\n      \u003C\u002FCommand.List>\n    \u003C\u002FCommand.Dialog>\n  )\n}\n```\n\n## Parts and styling\n\nAll parts forward props, including `ref`, to an appropriate element. Each part has a specific data-attribute (starting with `cmdk-`) that can be used for styling.\n\n### Command `[cmdk-root]`\n\nRender this to show the command menu inline, or use [Dialog](#dialog-cmdk-dialog-cmdk-overlay) to render in a elevated context. Can be controlled with the `value` and `onValueChange` props.\n\n> **Note**\n>\n> Values are always trimmed with the [trim()](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FString\u002Ftrim) method.\n\n```tsx\nconst [value, setValue] = React.useState('apple')\n\nreturn (\n  \u003CCommand value={value} onValueChange={setValue}>\n    \u003CCommand.Input \u002F>\n    \u003CCommand.List>\n      \u003CCommand.Item>Orange\u003C\u002FCommand.Item>\n      \u003CCommand.Item>Apple\u003C\u002FCommand.Item>\n    \u003C\u002FCommand.List>\n  \u003C\u002FCommand>\n)\n```\n\nYou can provide a custom `filter` function that is called to rank each item. Note that the value will be trimmed.\n\n```tsx\n\u003CCommand\n  filter={(value, search) => {\n    if (value.includes(search)) return 1\n    return 0\n  }}\n\u002F>\n```\n\nA third argument, `keywords`, can also be provided to the filter function. Keywords act as aliases for the item value, and can also affect the rank of the item. Keywords are trimmed.\n\n```tsx\n\u003CCommand\n  filter={(value, search, keywords) => {\n    const extendValue = value + ' ' + keywords.join(' ')\n    if (extendValue.includes(search)) return 1\n    return 0\n  }}\n\u002F>\n```\n\nOr disable filtering and sorting entirely:\n\n```tsx\n\u003CCommand shouldFilter={false}>\n  \u003CCommand.List>\n    {filteredItems.map((item) => {\n      return (\n        \u003CCommand.Item key={item} value={item}>\n          {item}\n        \u003C\u002FCommand.Item>\n      )\n    })}\n  \u003C\u002FCommand.List>\n\u003C\u002FCommand>\n```\n\nYou can make the arrow keys wrap around the list (when you reach the end, it goes back to the first item) by setting the `loop` prop:\n\n```tsx\n\u003CCommand loop \u002F>\n```\n\n### Dialog `[cmdk-dialog]` `[cmdk-overlay]`\n\nProps are forwarded to [Command](#command-cmdk-root). Composes Radix UI's Dialog component. The overlay is always rendered. See the [Radix Documentation](https:\u002F\u002Fwww.radix-ui.com\u002Fdocs\u002Fprimitives\u002Fcomponents\u002Fdialog) for more information. Can be controlled with the `open` and `onOpenChange` props.\n\n```tsx\nconst [open, setOpen] = React.useState(false)\n\nreturn (\n  \u003CCommand.Dialog open={open} onOpenChange={setOpen}>\n    ...\n  \u003C\u002FCommand.Dialog>\n)\n```\n\nYou can provide a `container` prop that accepts an HTML element that is forwarded to Radix UI's Dialog Portal component to specify which element the Dialog should portal into (defaults to `body`). See the [Radix Documentation](https:\u002F\u002Fwww.radix-ui.com\u002Fdocs\u002Fprimitives\u002Fcomponents\u002Fdialog#portal) for more information.\n\n```tsx\nconst containerElement = React.useRef(null)\n\nreturn (\n  \u003C>\n    \u003CCommand.Dialog container={containerElement.current} \u002F>\n    \u003Cdiv ref={containerElement} \u002F>\n  \u003C\u002F>\n)\n```\n\n### Input `[cmdk-input]`\n\nAll props are forwarded to the underlying `input` element. Can be controlled with the `value` and `onValueChange` props.\n\n```tsx\nconst [search, setSearch] = React.useState('')\n\nreturn \u003CCommand.Input value={search} onValueChange={setSearch} \u002F>\n```\n\n### List `[cmdk-list]`\n\nContains items and groups. Animate height using the `--cmdk-list-height` CSS variable.\n\n```css\n[cmdk-list] {\n  min-height: 300px;\n  height: var(--cmdk-list-height);\n  max-height: 500px;\n  transition: height 100ms ease;\n}\n```\n\nTo scroll item into view earlier near the edges of the viewport, use scroll-padding:\n\n```css\n[cmdk-list] {\n  scroll-padding-block-start: 8px;\n  scroll-padding-block-end: 8px;\n}\n```\n\n### Item `[cmdk-item]` `[data-disabled?]` `[data-selected?]`\n\nItem that becomes active on pointer enter. You should provide a unique `value` for each item, but it will be automatically inferred from the `.textContent`.\n\n```tsx\n\u003CCommand.Item\n  onSelect={(value) => console.log('Selected', value)}\n  \u002F\u002F Value is implicity \"apple\" because of the provided text content\n>\n  Apple\n\u003C\u002FCommand.Item>\n```\n\nYou can also provide a `keywords` prop to help with filtering. Keywords are trimmed.\n\n```tsx\n\u003CCommand.Item keywords={['fruit', 'apple']}>Apple\u003C\u002FCommand.Item>\n```\n\n```tsx\n\u003CCommand.Item\n  onSelect={(value) => console.log('Selected', value)}\n  \u002F\u002F Value is implicity \"apple\" because of the provided text content\n>\n  Apple\n\u003C\u002FCommand.Item>\n```\n\nYou can force an item to always render, regardless of filtering, by passing the `forceMount` prop.\n\n### Group `[cmdk-group]` `[hidden?]`\n\nGroups items together with the given `heading` (`[cmdk-group-heading]`).\n\n```tsx\n\u003CCommand.Group heading=\"Fruit\">\n  \u003CCommand.Item>Apple\u003C\u002FCommand.Item>\n\u003C\u002FCommand.Group>\n```\n\nGroups will not unmount from the DOM, rather the `hidden` attribute is applied to hide it from view. This may be relevant in your styling.\n\nYou can force a group to always render, regardless of filtering, by passing the `forceMount` prop.\n\n### Separator `[cmdk-separator]`\n\nVisible when the search query is empty or `alwaysRender` is true, hidden otherwise.\n\n### Empty `[cmdk-empty]`\n\nAutomatically renders when there are no results for the search query.\n\n### Loading `[cmdk-loading]`\n\nYou should conditionally render this with `progress` while loading asynchronous items.\n\n```tsx\nconst [loading, setLoading] = React.useState(false)\n\nreturn \u003CCommand.List>{loading && \u003CCommand.Loading>Hang on…\u003C\u002FCommand.Loading>}\u003C\u002FCommand.List>\n```\n\n### `useCommandState(state => state.selectedField)`\n\nHook that composes [`useSyncExternalStore`](https:\u002F\u002Freactjs.org\u002Fdocs\u002Fhooks-reference.html#usesyncexternalstore). Pass a function that returns a slice of the command menu state to re-render when that slice changes. This hook is provided for advanced use cases and should not be commonly used.\n\nA good use case would be to render a more detailed empty state, like so:\n\n```tsx\nconst search = useCommandState((state) => state.search)\nreturn \u003CCommand.Empty>No results found for \"{search}\".\u003C\u002FCommand.Empty>\n```\n\n## Examples\n\nCode snippets for common use cases.\n\n### Nested items\n\nOften selecting one item should navigate deeper, with a more refined set of items. For example selecting \"Change theme…\" should show new items \"Dark theme\" and \"Light theme\". We call these sets of items \"pages\", and they can be implemented with simple state:\n\n```tsx\nconst ref = React.useRef(null)\nconst [open, setOpen] = React.useState(false)\nconst [search, setSearch] = React.useState('')\nconst [pages, setPages] = React.useState([])\nconst page = pages[pages.length - 1]\n\nreturn (\n  \u003CCommand\n    onKeyDown={(e) => {\n      \u002F\u002F Escape goes to previous page\n      \u002F\u002F Backspace goes to previous page when search is empty\n      if (e.key === 'Escape' || (e.key === 'Backspace' && !search)) {\n        e.preventDefault()\n        setPages((pages) => pages.slice(0, -1))\n      }\n    }}\n  >\n    \u003CCommand.Input value={search} onValueChange={setSearch} \u002F>\n    \u003CCommand.List>\n      {!page && (\n        \u003C>\n          \u003CCommand.Item onSelect={() => setPages([...pages, 'projects'])}>Search projects…\u003C\u002FCommand.Item>\n          \u003CCommand.Item onSelect={() => setPages([...pages, 'teams'])}>Join a team…\u003C\u002FCommand.Item>\n        \u003C\u002F>\n      )}\n\n      {page === 'projects' && (\n        \u003C>\n          \u003CCommand.Item>Project A\u003C\u002FCommand.Item>\n          \u003CCommand.Item>Project B\u003C\u002FCommand.Item>\n        \u003C\u002F>\n      )}\n\n      {page === 'teams' && (\n        \u003C>\n          \u003CCommand.Item>Team 1\u003C\u002FCommand.Item>\n          \u003CCommand.Item>Team 2\u003C\u002FCommand.Item>\n        \u003C\u002F>\n      )}\n    \u003C\u002FCommand.List>\n  \u003C\u002FCommand>\n)\n```\n\n### Show sub-items when searching\n\nIf your items have nested sub-items that you only want to reveal when searching, render based on the search state:\n\n```tsx\nconst SubItem = (props) => {\n  const search = useCommandState((state) => state.search)\n  if (!search) return null\n  return \u003CCommand.Item {...props} \u002F>\n}\n\nreturn (\n  \u003CCommand>\n    \u003CCommand.Input \u002F>\n    \u003CCommand.List>\n      \u003CCommand.Item>Change theme…\u003C\u002FCommand.Item>\n      \u003CSubItem>Change theme to dark\u003C\u002FSubItem>\n      \u003CSubItem>Change theme to light\u003C\u002FSubItem>\n    \u003C\u002FCommand.List>\n  \u003C\u002FCommand>\n)\n```\n\n### Asynchronous results\n\nRender the items as they become available. Filtering and sorting will happen automatically.\n\n```tsx\nconst [loading, setLoading] = React.useState(false)\nconst [items, setItems] = React.useState([])\n\nReact.useEffect(() => {\n  async function getItems() {\n    setLoading(true)\n    const res = await api.get('\u002Fdictionary')\n    setItems(res)\n    setLoading(false)\n  }\n\n  getItems()\n}, [])\n\nreturn (\n  \u003CCommand>\n    \u003CCommand.Input \u002F>\n    \u003CCommand.List>\n      {loading && \u003CCommand.Loading>Fetching words…\u003C\u002FCommand.Loading>}\n      {items.map((item) => {\n        return (\n          \u003CCommand.Item key={`word-${item}`} value={item}>\n            {item}\n          \u003C\u002FCommand.Item>\n        )\n      })}\n    \u003C\u002FCommand.List>\n  \u003C\u002FCommand>\n)\n```\n\n### Use inside Popover\n\nWe recommend using the [Radix UI popover](https:\u002F\u002Fwww.radix-ui.com\u002Fdocs\u002Fprimitives\u002Fcomponents\u002Fpopover) component. ⌘K relies on the Radix UI Dialog component, so this will reduce your bundle size a bit due to shared dependencies.\n\n```bash\n$ pnpm install @radix-ui\u002Freact-popover\n```\n\nRender `Command` inside of the popover content:\n\n```tsx\nimport * as Popover from '@radix-ui\u002Freact-popover'\n\nreturn (\n  \u003CPopover.Root>\n    \u003CPopover.Trigger>Toggle popover\u003C\u002FPopover.Trigger>\n\n    \u003CPopover.Content>\n      \u003CCommand>\n        \u003CCommand.Input \u002F>\n        \u003CCommand.List>\n          \u003CCommand.Item>Apple\u003C\u002FCommand.Item>\n        \u003C\u002FCommand.List>\n      \u003C\u002FCommand>\n    \u003C\u002FPopover.Content>\n  \u003C\u002FPopover.Root>\n)\n```\n\n### Drop in stylesheets\n\nYou can find global stylesheets to drop in as a starting point for styling. See [website\u002Fstyles\u002Fcmdk](website\u002Fstyles\u002Fcmdk) for examples.\n\n## FAQ\n\n**Accessible?** Yes. Labeling, aria attributes, and DOM ordering tested with Voice Over and Chrome DevTools. [Dialog](#dialog-cmdk-dialog-cmdk-overlay) composes an accessible Dialog implementation.\n\n**Virtualization?** No. Good performance up to 2,000-3,000 items, though. Read below to bring your own.\n\n**Filter\u002Fsort items manually?** Yes. Pass `shouldFilter={false}` to [Command](#command-cmdk-root). Better memory usage and performance. Bring your own virtualization this way.\n\n**React 18 safe?** Yes, required. Uses React 18 hooks like `useId` and `useSyncExternalStore`.\n\n**Unstyled?** Yes, use the listed CSS selectors.\n\n**Hydration mismatch?** No, likely a bug in your code. Ensure the `open` prop to `Command.Dialog` is `false` on the server.\n\n**React strict mode safe?** Yes. Open an issue if you notice an issue.\n\n**Weird\u002Fwrong behavior?** Make sure your `Command.Item` has a `key` and unique `value`.\n\n**Concurrent mode safe?** Maybe, but concurrent mode is not yet real. Uses risky approaches like manual DOM ordering.\n\n**React server component?** No, it's a client component.\n\n**Listen for ⌘K automatically?** No, do it yourself to have full control over keybind context.\n\n**React Native?** No, and no plans to support it. If you build a React Native version, let us know and we'll link your repository here.\n\n## History\n\nWritten in 2019 by Paco ([@pacocoursey](https:\u002F\u002Ftwitter.com\u002Fpacocoursey)) to see if a composable combobox API was possible. Used for the Vercel command menu and autocomplete by Rauno ([@raunofreiberg](https:\u002F\u002Ftwitter.com\u002Fraunofreiberg)) in 2020. Re-written independently in 2022 with a simpler and more performant approach. Ideas and help from Shu ([@shuding\\_](https:\u002F\u002Ftwitter.com\u002Fshuding_)).\n\n[use-descendants](https:\u002F\u002Fgithub.com\u002Fpacocoursey\u002Fuse-descendants) was extracted from the 2019 version.\n\n## Testing\n\nFirst, install dependencies and Playwright browsers:\n\n```bash\npnpm install\npnpm playwright install\n```\n\nThen ensure you've built the library:\n\n```bash\npnpm build\n```\n\nThen run the tests using your local build against real browser engines:\n\n```bash\npnpm test\n```\n","⌘K 是一个快速、无样式化的命令菜单React组件，也可以作为可访问的组合框使用。它支持自动过滤和排序项目，并且拥有完全可组合的API，允许用户将项目包裹在其他组件中或直接作为静态JSX使用。该组件基于TypeScript编写，确保了类型安全性和开发效率。适用于需要高效搜索和选择功能的应用场景，如开发工具、网站导航等，能够显著提升用户体验。MIT许可证下开源，社区活跃，易于集成与扩展。",2,"2026-06-11 03:26:42","top_topic"]