Command Search

命令搜索

由小搜索条展开为分组命令面板的搜索组件。

PRESS F OR
CLICK IN
INPUT

交互方式

点击搜索条或按 F 展开，输入过滤命令，上下方向键选择、Enter 执行，Esc 或点击外部收起。浮层不受演示框裁切。演示执行后显示选中项；视觉参考 Skiper UI Vercel Command Search，独立实现。

使用示例

"use client"
import { useState } from "react"
import { CommandSearch } from "@/components/ui/command-search"

export function Demo() {
  const [selected, setSelected] = useState("")
  return <>
    <CommandSearch items={[
      { id: "calendar", label: "Calendar", group: "Suggestions" },
      { id: "settings", label: "Settings", group: "Settings", keywords: ["preferences"] },
    ]} onSelect={(item) => setSelected(item.label)} />
    <p role="status">{selected}</p>
  </>
}

参数

参数	类型 / 默认值	说明
`items`	`CommandSearchItem[]`	唯一 id、label；可选 group、keywords、icon、hint、disabled。hint 仅显示提示文字，不注册快捷键。
`onSelect`	`(item: CommandSearchItem) => void`	鼠标或 Enter 执行命令后调用；默认保持面板打开，与原演示一致。可通过受控 open 在执行后收起。
`open`	`boolean`	受控展开状态。
`defaultOpen`	`boolean`false	非受控初始状态。
`onOpenChange`	`(open: boolean) => void`	请求展开或收起时调用。
`placeholder`	`string`"Find..."	搜索条和输入框的占位符。
`label`	`string`"Command search"	搜索框的无障碍名称。
`emptyLabel`	`string`"No results found."	没有匹配结果时的文字。
`shortcut`	`string \| false`"f"	打开快捷键；false 禁用。输入其他表单时不拦截，入口需在视口内。
`theme`	`"light" \| "dark"`"light"	独立深浅配色。
`width`	`number`384	展开面板宽度（px），至少 240，自动适应窄屏。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

@radix-ui/react-dialogclsxcmdklucide-reactmotiontailwind-merge

components/ui/command-search.css
components/ui/command-search.tsx
lib/utils.ts

来源

https://skiper-ui.com/v1/skiper92

https://github.com/dip/cmdk