Glass Command

pnpm dlx shadcn@4.14.1 add @glassyui/glass-command

import {
  GlassCommand,
  GlassCommandDialog,
  GlassCommandEmpty,
  GlassCommandGroup,
  GlassCommandInput,
  GlassCommandItem,
  GlassCommandList,
} from "@/components/glassyui/glass-command";

export function Launcher({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
  return (
    <GlassCommandDialog open={open} onOpenChange={onOpenChange}>
      <GlassCommand label="Commands">
        <GlassCommandInput placeholder="Type a command or search…" />
        <GlassCommandList>
          <GlassCommandEmpty>No results found.</GlassCommandEmpty>
          <GlassCommandGroup heading="Suggestions">
            <GlassCommandItem onSelect={() => onOpenChange(false)}>New file</GlassCommandItem>
          </GlassCommandGroup>
        </GlassCommandList>
      </GlassCommand>
    </GlassCommandDialog>
  );
}

useEffect(() => {
  const onKeyDown = (event: KeyboardEvent) => {
    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
      event.preventDefault();
      setOpen((current) => !current);
    }
  };

  document.addEventListener("keydown", onKeyDown);

  return () => document.removeEventListener("keydown", onKeyDown);
}, []);

<GlassCommandItem keywords={["dark", "light"]} onSelect={toggleTheme}>
  Switch theme
  <GlassCommandShortcut>
    <GlassKbdGroup><GlassKbd>⌘</GlassKbd><GlassKbd>T</GlassKbd></GlassKbdGroup>
  </GlassCommandShortcut>
</GlassCommandItem>