---
title: "Slash Command Suggestions"
description: "The command picker that opens above the composer, with an app rail, grouped options and a matched-command preview."
---

The command picker that opens above the composer, with an app rail, grouped options and a matched-command preview. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Slash Command Suggestions — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add slash-command-suggestions
```

npm dependencies: class-variance-authority. Registry dependencies, installed with it: slash-command.

Files written — React: components/ui/slash-command-suggestions.tsx. Vue: components/ui/slash-command-suggestions/SlashCommandSuggestions.vue, components/ui/slash-command-suggestions/SlashCommandSuggestionsRail.vue, components/ui/slash-command-suggestions/SlashCommandSuggestionsRailItem.vue, components/ui/slash-command-suggestions/SlashCommandSuggestionsList.vue, components/ui/slash-command-suggestions/SlashCommandSuggestionsHeader.vue, components/ui/slash-command-suggestions/SlashCommandSuggestionGroup.vue, components/ui/slash-command-suggestions/SlashCommandAppIcon.vue, components/ui/slash-command-suggestions/SlashCommandSuggestion.vue, components/ui/slash-command-suggestions/SlashCommandSuggestionMatched.vue, components/ui/slash-command-suggestions/index.ts.

## Usage

React:

```tsx
import { SlashCommandSuggestions } from "@/components/ui/slash-command-suggestions"
```

Vue:

```ts
import { SlashCommandSuggestions, SlashCommandSuggestionsRail, SlashCommandSuggestionsRailItem, SlashCommandSuggestionsList, SlashCommandSuggestionsHeader, SlashCommandSuggestionGroup, SlashCommandAppIcon, SlashCommandSuggestion, SlashCommandSuggestionMatched } from "@/components/ui/slash-command-suggestions"
```

## API reference

**`SlashCommandSuggestionsRailItem`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | — | Optional active value. |

**`SlashCommandSuggestion`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | — | Command path without the leading slash, e.g. `moderation ban`. |
| `description` | `string \| undefined` | — | Optional description value. |
| `appLabel` | `string \| undefined` | — | Name of the app the command belongs to, shown on the right. |
| `icon` | `React.ReactNode \| undefined` | — | Icon for the owning app; pair with `<SlashCommandAppIcon>`. |
| `active` | `boolean \| undefined` | — | Optional active value. |
| `disabled` | `boolean \| undefined` | — | Optional disabled value. |

**`SlashCommandSuggestionMatched`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean \| undefined` | — | Optional active value. |

The registry exports `SlashCommandSuggestions`, `SlashCommandSuggestionsRail`, `SlashCommandSuggestionsRailItem`, `SlashCommandSuggestionsList`, `SlashCommandSuggestionsHeader`, `SlashCommandSuggestionGroup`, `SlashCommandAppIcon`, `SlashCommandSuggestion`, `SlashCommandSuggestionMatched`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Keep focus in the composer and point `aria-activedescendant` at the active option. Announce disabled options and label both the app rail and command list.

## Tokens

Slash Command Suggestions reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.