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
Shortcut and Separator. Make sure you have installed and configured it before using this component.Shortcut
Separator
Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add commandAnatomy
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…
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.