Command

About

The `` component uses the cmdk component by Dip.

Installation

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Install the following dependencies:

npm install cmdk

Copy and paste the following code into your project.

View complete source: components/ui/command.tsx

Update the import paths to match your project setup.

Usage

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"

<Command className="max-w-sm rounded-lg border">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Composition

Use the following composition to build a Command:

Command
├── CommandInput
└── CommandList
    ├── CommandEmpty
    ├── CommandGroup
    │   ├── CommandItem
    │   └── CommandItem
    ├── CommandSeparator
    └── CommandGroup
        ├── CommandItem
        └── CommandItem

Basic

A simple command menu in a dialog.

Shortcuts

Groups

A command menu with groups, icons and separators.

Scrollable

Scrollable command menu with multiple items.

RTL

To enable RTL support in JGuang UI, see the RTL configuration guide.

API Reference

See the cmdk documentation for more information.