Command
Command palette with search, groups, and keyboard navigation. Install Command from the VLLNT UI registry with the shadcn CLI.
What it is and when to use
Command is a command palette built on the cmdk library. It combines a search input, grouped result lists, items, shortcuts, and an empty state, filtering entries as the user types and moving the highlight with arrow keys. Use it for a searchable action menu or a ⌘K launcher that jumps between pages, runs commands, or finds records. CommandDialog wraps the same palette in a Radix dialog so it opens as a centered modal overlay.
OverlayCommand palette with search, groups, and keyboard navigation. Part of the overlay family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Command to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/command.jsonSource
"use client";
import * as React from "react";
import type * as DialogPrimitive from "@radix-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react";
import { cn } from "../../lib/utils";
import { Dialog, DialogContent, DialogTitle } from "../dialog/dialog";
const Command = ({
className,
ref: reference,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
ref?: React.Ref<React.ComponentRef<typeof CommandPrimitive>>;
}) => (
<CommandPrimitive
className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className,
)}
ref={reference}
{...props}
/>
);
Command.displayName = CommandPrimitive.displayName;
type CommandDialogProps = {} & React.ComponentPropsWithoutRef<
typeof DialogPrimitive.Root
>;
const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0 shadow-lg">
<DialogTitle className="sr-only">Command Menu</DialogTitle>
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
</DialogContent>
</Dialog>
);
};
const CommandInput = ({
className,
ref: reference,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
ref?: React.Ref<React.ComponentRef<typeof CommandPrimitive.Input>>;
}) => (
// eslint-disable-next-line react/no-unknown-property
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
<Search className="mr-2 size-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={reference}
{...props}
/>
</div>
);
CommandInput.displayName = CommandPrimitive.Input.displayName;
const CommandList = ({
className,
ref: reference,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
ref?: React.Ref<React.ComponentRef<typeof CommandPrimitive.List>>;
}) => (
<CommandPrimitive.List
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
ref={reference}
{...props}
/>
);
CommandList.displayName = CommandPrimitive.List.displayName;
const CommandEmpty = ({
ref: reference,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
ref?: React.Ref<React.ComponentRef<typeof CommandPrimitive.Empty>>;
}) => (
<CommandPrimitive.Empty
className="py-6 text-center text-sm"
ref={reference}
{...props}
/>
);
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
const CommandGroup = ({
className,
ref: reference,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
ref?: React.Ref<React.ComponentRef<typeof CommandPrimitive.Group>>;
}) => (
<CommandPrimitive.Group
className={cn(
"overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
className,
)}
ref={reference}
{...props}
/>
);
CommandGroup.displayName = CommandPrimitive.Group.displayName;
const CommandSeparator = ({
className,
ref: reference,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
ref?: React.Ref<React.ComponentRef<typeof CommandPrimitive.Separator>>;
}) => (
<CommandPrimitive.Separator
className={cn("-mx-1 h-px bg-border", className)}
ref={reference}
{...props}
/>
);
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
const CommandItem = ({
className,
disabled,
ref: reference,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
ref?: React.Ref<React.ComponentRef<typeof CommandPrimitive.Item>>;
}) => (
<CommandPrimitive.Item
className={cn(
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:opacity-50",
disabled && "pointer-events-none",
className,
)}
disabled={disabled}
ref={reference}
{...props}
/>
);
CommandItem.displayName = CommandPrimitive.Item.displayName;
const CommandShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className,
)}
{...props}
/>
);
};
CommandShortcut.displayName = "CommandShortcut";
export {
Command,
CommandDialog,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CommandShortcut,
};
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.
FAQ
- What is Command?
- Command is a command-palette component for React, built on the cmdk library. It pairs a search input with grouped, filterable result lists, items, shortcuts, and an empty state.
- How do I add Command?
- Run pnpm dlx shadcn@latest add https://ui.vllnt.com/r/command.json to copy the source into your project, then import Command and its parts from your ui directory.
- How do I make Command open as a ⌘K modal?
- Use the CommandDialog export, which renders the same palette inside a Radix dialog. Toggle its open prop from a keyboard shortcut to get a centered ⌘K overlay.