---
title: "Command panel"
description: "A command browser with a selectable suggestion list and a detailed option card."
---

A command browser with a selectable suggestion list and a detailed option card. 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 Command panel — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add command-panel
``` Registry dependencies, installed with it: slash-command-suggestions, bot-command-card.

Files written — React: components/command-panel.tsx. Vue: components/command-panel/CommandPanel.vue, components/command-panel/types.ts, components/command-panel/index.ts.

## Usage

React:

```tsx
import { CommandPanel } from "@/components/command-panel"
```

Vue:

```ts
import { CommandPanel } from "@/components/command-panel"
```

## API reference

**`CommandPanel`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `commands` | `readonly CommandPanelCommand[]` | — | Required commands value. |
| `selectedId` | `string \| undefined` | — | Optional selectedId value. |
| `defaultSelectedId` | `string \| undefined` | — | Optional defaultSelectedId value. |
| `onSelectedIdChange` | `(id: string) => void \| undefined` | — | Optional onSelectedIdChange value. |
| `listLabel` | `string \| undefined` | — | Optional listLabel value. |
| `emptyLabel` | `string \| undefined` | — | Optional emptyLabel value. |

The registry exports `CommandPanel` plus the `CommandPanelCommand` and `CommandPanelOption` types. It also accepts the native section attributes; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

The suggestion list is one keyboard focus stop. Arrow keys, Home and End move its active descendant while the detail card is announced through a polite live region. Give the list a contextual `listLabel`, keep command IDs unique, and do not communicate the active command by colour alone.

## Tokens

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