Command

Command menu for search and quick actions.

@@directive("'use client'")

@react.component

About

The <Command /> component uses the cmdk component by Dip.

Installation

npx shadcn@latest add @rescript-shadcn/Command

Usage

<Command className="max-w-sm rounded-lg border">
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty> {"No results found."->React.string} </Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item> {"Calendar"->React.string} </Command.Item>
      <Command.Item> {"Search Emoji"->React.string} </Command.Item>
      <Command.Item> {"Calculator"->React.string} </Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item> {"Profile"->React.string} </Command.Item>
      <Command.Item> {"Billing"->React.string} </Command.Item>
      <Command.Item> {"Settings"->React.string} </Command.Item>
    </Command.Group>
  </Command.List>
</Command>

Examples

Basic

A simple command menu in a dialog.

@@directive("'use client'")

@react.component

Shortcuts

@@directive("'use client'")

@react.component

Groups

A command menu with groups, icons and separators.

@@directive("'use client'")

@react.component

Scrollable

Scrollable command menu with multiple items.

@@directive("'use client'")

@react.component

API Reference

See the cmdk documentation for more information.