Navigation & LayoutPro

Command

A searchable command palette dialog with keyboard navigation (⌘K pattern).

Usage

Installation

bash

npm install @wunderui/react

Then import what you need:

tsx

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandItemRow,
  CommandItemRowProps,
  CommandList,
  CommandSeparator,
} from "@wunderui/react"

Examples

Command palette

Grouped commands with icons and shortcuts, shown inline here — usually opened with ⌘K.

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

App search

The search field in an app header opens the palette. Click it here; in your app, bind ⌘K to the same open state (on this site ⌘K opens the docs search).

WunderUI

PreviousApp Layout NextContext Menu