# Slash Command Palette

Slash Command Palette [#slash-command-palette]

The **Slash Command Palette** is a command-palette dropdown triggered by "/" in the composer to pick tools or commands by name, category, description, and icon — designed to layer onto a [`PromptInput`](/docs/conversation/prompt-input) Tools slot. It is purely presentational over a local list: the consumer decides when to open it (e.g. when the composer value starts with "/") and what query to pass.

It is built on the shadcn/ui [`Command`](https://ui.shadcn.com/docs/components/command) (cmdk) primitive for fuzzy filtering and keyboard navigation, so it inherits your theme.

**When to use it:** a composer where typing "/" should reveal a pickable list of tools or commands.

Preview [#preview]

```tsx
'use client';

import { useState } from 'react';
import { Search, Image, FileText, Calculator } from 'lucide-react';
import {
  SlashCommandPalette,
  type SlashCommand,
} from '@/components/slash-command-palette';

const COMMANDS: SlashCommand[] = [
  { id: 'search', name: 'search', description: 'Search the web', category: 'Tools', icon: Search },
  { id: 'image', name: 'image', description: 'Generate an image', category: 'Tools', icon: Image },
  { id: 'summarize', name: 'summarize', description: 'Summarize a document', category: 'Text', icon: FileText },
  { id: 'calc', name: 'calc', description: 'Evaluate an expression', category: 'Text', icon: Calculator },
];

/**
 * Demo for SlashCommandPalette, used by the docs live preview. Type "/" in the
 * composer to open the palette; keep typing to filter; select a command to
 * insert its name and dismiss. Pure UI — no model download.
 */
export default function SlashCommandPaletteDemo() {
  // Seed with "/" so the palette renders open in the docs preview.
  const [value, setValue] = useState('/');
  const [chosen, setChosen] = useState<string | null>(null);

  const open = value.startsWith('/');

  return (
    <div className="relative flex min-h-[18rem] w-full max-w-sm flex-col gap-2">
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Type / to open the palette…"
        className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
      />
      {open && (
        <div className="relative z-10">
          <SlashCommandPalette
            commands={COMMANDS}
            open={open}
            query={value.slice(1)}
            onSelect={(cmd) => {
              setChosen(cmd.name);
              setValue(`/${cmd.name} `);
            }}
            onDismiss={() => setValue('')}
          />
        </div>
      )}
      {chosen && (
        <p className="text-xs text-muted-foreground">
          Selected: <span className="font-mono">/{chosen}</span>
        </p>
      )}
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/input-controls/slash-command-palette
```

Dependencies [#dependencies]

* **Data source:** renders the `commands` list you pass and emits `onSelect` / `onDismiss` callbacks — works with any backend. Recommended LocalMode producer: a local tool/command list (e.g. an agent's tool registry) (optional).
* `cmdk` — the underlying command primitive
* `lucide-react` — icons
* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically)

Files installed [#files-installed]

* `slash-command-palette.tsx` — the component
* `ui/command.tsx` — the shadcn/ui command primitive (registry dependency)
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**SlashCommandPalette**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `commands` | `array` | — | **Required.** The local list of commands/tools to offer. |
| `open` | `boolean` | — | **Required.** Whether the palette is shown (typically: composer value starts with "/"). |
| `query` | `string` | — | The current search query (typically the composer text after the "/"). Filters the list. |
| `onSelect` | `function` | — | **Required.** Fired with the chosen command when the user selects one. |
| `onDismiss` | `function` | — | **Required.** Fired when the palette should dismiss (Escape or selection). |

Examples [#examples]

Open when the composer starts with "/" [#open-when-the-composer-starts-with-]

```tsx
import { useState } from 'react';
import { Search, Image } from 'lucide-react';
import { SlashCommandPalette } from '@/components/slash-command-palette';

const COMMANDS = [
  { id: 'search', name: 'search', description: 'Search the web', category: 'Tools', icon: Search },
  { id: 'image', name: 'image', description: 'Generate an image', category: 'Tools', icon: Image },
];

export function Composer() {
  const [value, setValue] = useState('');
  const open = value.startsWith('/');

  return (
    <div className="relative">
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      {open && (
        <SlashCommandPalette
          commands={COMMANDS}
          open={open}
          query={value.slice(1)}
          onSelect={(cmd) => setValue(`/${cmd.name} `)}
          onDismiss={() => setValue('')}
        />
      )}
    </div>
  );
}
```

Customization [#customization]

Commands are grouped by `category` (uncategorized commands fall under "Commands"). The palette filters on name + description via cmdk. Position it yourself (e.g. absolutely below the composer). Everything is theme-driven via shadcn/ui CSS variables — edit the copied file to change the row layout or add command shortcuts.