# Command Menu with Groups

> A command menu with groups block.

A shadcn/ui block from the [@blocks-so](https://blocks.so) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blocks-so/command-menu-01).

- Page, with a live preview: https://shadcn.exchange/r/blocks-so/command-menu-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blocks-so/command-menu-01-light-d2980f5795994d3f.png
- Registry item: https://blocks.so/r/command-menu-01.json
- Categories: command-menu
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blocks.so/r/command-menu-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@tabler/icons-react`
- Registry items: `button`, `command`, `kbd`

## Files

### `content/components/command-menu/command-menu-01.tsx`

```tsx
'use client';

import {
  IconBell,
  IconBolt,
  IconCalendar,
  IconChartBar,
  IconChartPie,
  IconClock,
  IconFileText,
  IconHelp,
  IconKeyboard,
  IconLayoutDashboard,
  IconLayoutKanban,
  IconLogout,
  IconMessage,
  IconPalette,
  IconSettings,
  IconSquareCheck,
  IconTarget,
  IconTrendingUp,
  IconUsers,
} from '@tabler/icons-react';
import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command';
import { Kbd } from '@/components/ui/kbd';

const workspaceItems = [
  { icon: IconLayoutDashboard, label: 'Dashboard' },
  { icon: IconLayoutKanban, label: 'Projects' },
  { icon: IconSquareCheck, label: 'Tasks' },
  { icon: IconCalendar, label: 'Calendar' },
  { icon: IconUsers, label: 'Team members' },
  { icon: IconMessage, label: 'Messages' },
  { icon: IconFileText, label: 'Documents' },
  { icon: IconBell, label: 'Notifications' },
  { icon: IconClock, label: 'Time tracking' },
  { icon: IconTarget, label: 'Goals' },
];

const analyticsItems = [
  { icon: IconChartBar, label: 'Overview' },
  { icon: IconTrendingUp, label: 'Performance' },
  { icon: IconChartPie, label: 'Reports' },
  { icon: IconBolt, label: 'Insights' },
];

const settingsItems = [
  { icon: IconSettings, label: 'Preferences' },
  { icon: IconPalette, label: 'Appearance' },
  { icon: IconKeyboard, label: 'Keyboard shortcuts' },
  { icon: IconHelp, label: 'Help & support' },
  { icon: IconLogout, label: 'Sign out' },
];

export function CommandMenu01() {
  const [open, setOpen] = useState(true);

  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((prev) => !prev);
      }
    };

    document.addEventListener('keydown', down);
    return () => document.removeEventListener('keydown', down);
  }, []);

  return (
    <>
      <Button onClick={() => setOpen(true)} variant="outline">
        Open Command Menu
      </Button>

      <CommandDialog
        className="-translate-y-1/2 top-1/2"
        onOpenChange={setOpen}
        open={open}
        showCloseButton={false}
      >
        <Command>
          <CommandInput
            className="h-12"
            placeholder="Type a command or search..."
          />
          <CommandList className="h-[320px] max-h-[320px]">
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Workspace">
              {workspaceItems.map((item) => (
                <CommandItem key={item.label}>
                  <item.icon className="mr-2 h-5 w-5" />
                  <span>{item.label}</span>
                </CommandItem>
              ))}
            </CommandGroup>
            <CommandGroup heading="Analytics">
              {analyticsItems.map((item) => (
                <CommandItem key={item.label}>
                  <item.icon className="mr-2 h-5 w-5" />
                  <span>{item.label}</span>
                </CommandItem>
              ))}
            </CommandGroup>
            <CommandGroup heading="Settings">
              {settingsItems.map((item) => (
                <CommandItem key={item.label}>
                  <item.icon className="mr-2 h-5 w-5" />
                  <span>{item.label}</span>
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
          <div className="flex h-12 items-center justify-end border-t px-3">
            <button
              className="flex items-center gap-1 text-muted-foreground text-sm hover:text-foreground"
              onClick={() => setOpen(false)}
              type="button"
            >
              <span>Close</span>
              <Kbd className="ml-1">Esc</Kbd>
            </button>
          </div>
        </Command>
      </CommandDialog>
    </>
  );
}
```