ComponentsCore

Command

Command offers an accessible interface to build keyboard-driven menus, search fields, and autocomplete inputs by combining input handling, navigation, and selection.

Example

Installation

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Copy and paste the following code into your project.

components/ui/core/command.tsx
npx @libravelui@latest add command

Anatomy

import {
  Command,
  CommandInput,
  CommandList,
  CommandGroup,
  CommandItem,
  CommandSeparator,
} from "@/components/ui/core/command";
<Command>
  <CommandInput placeholder="Placeholder belongs here" />
  <CommandList>
    <CommandGroup title="Group Title">
      <CommandItem textValue="Item One">
        <span>Item One</span>
      </CommandItem>
      <CommandItem textValue="Item Two">
        <span>Item Two</span>
      </CommandItem>
    </CommandGroup>

    <CommandSeparator />

    <CommandGroup title="Another Group">
      <CommandItem textValue="Item Three" tone="destructive">
        <span>Item Three</span>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Another Example

With Modal

A Command component rendered inside a modal for focused, searchable selection.

Props

Loading types…

Edit on GitHub

Avatar

An image element used to represent a user or entity, typically displayed as a circular or square thumbnail. Can fall back to initials or an icon when no image is provided.

Context Menu

Instantly reveals a contextual menu at the precise location of your right-click, allowing users to quickly interact with actions that are relevant to the current element or interface state.