Home/Components/Overlays/CommandPalette

CommandPalette

コマンドパレット（⌘K）。検索 + アクション実行の統合 UI。

import { CommandPalette } from "@blueai/ui"

Examples

Basic

const [open, setOpen] = useState(false);

const sections: CommandSection[] = [
  {
    label: "ページ",
    items: [
      { id: "home", label: "ホーム", icon: <HouseIcon size={16} />, onSelect: () => navigate("/") },
      { id: "settings", label: "設定", icon: <GearIcon size={16} />, onSelect: () => navigate("/settings") },
    ],
  },
  {
    label: "アクション",
    items: [
      { id: "search", label: "検索", shortcut: "⌘K", onSelect: () => {} },
    ],
  },
];

<CommandPalette
  open={open}
  onClose={() => setOpen(false)}
  sections={sections}
  placeholder="何をしますか？"
/>

Props

Prop	Type	Default	Description
open*	boolean	—	表示状態
onClose*	() => void	—	閉じるハンドラ
sections*	CommandSection[]	—	コマンドセクション { label, items }
placeholder	string	"コマンドを検索..."	検索欄のプレースホルダー

Types

CommandSection

type CommandSection = {
  label: string;
  items: CommandItem[];
};

CommandItem

type CommandItem = {
  id: string;
  label: string;
  icon?: ReactNode;
  hint?: string;
  shortcut?: string;
  onSelect: () => void;
};