);
}
function Item({ className, ...props }: Autocomplete.Item.Props) {
return (
);
}
function Empty({ className, ...props }: Autocomplete.Empty.Props) {
return (
);
}
function Group({ className, ...props }: Autocomplete.Group.Props) {
return (
);
}
function GroupLabel({ className, ...props }: Autocomplete.GroupLabel.Props) {
return (
);
}
function Separator({ className, ...props }: Autocomplete.Separator.Props) {
return (
);
}
function Shortcut({ className, ...props }: Command.Shortcut.Props) {
return ;
}
function Toolbar({ className, ...props }: Command.Toolbar.Props) {
return ;
}
function Footer({ className, ...props }: Command.Footer.Props) {
return ;
}
function Panel({ className, ...props }: Command.Panel.Props) {
return ;
}
const Collection = Autocomplete.Collection;
const Command = {
Root,
Dialog,
DialogTrigger,
DialogPopup,
Input,
List,
Item,
Empty,
Group,
GroupLabel,
Separator,
Shortcut,
Toolbar,
Footer,
Panel,
Collection,
};
namespace Command {
export namespace Root {
export type Props = React.ComponentProps;
}
export namespace Dialog {
export type Props = BaseDialog.Root.Props;
}
export namespace DialogTrigger {
export type Props = BaseDialog.Trigger.Props;
}
export namespace DialogPopup {
export interface Props extends React.HTMLAttributes {
className?: string;
children?: React.ReactNode;
}
}
export namespace Input {
export interface Props extends Autocomplete.Input.Props {
endAddon?: React.ReactNode;
}
}
export namespace List {
export type Props = Autocomplete.List.Props;
}
export namespace Item {
export type Props = Autocomplete.Item.Props;
export type State = Autocomplete.Item.State;
}
export namespace Empty {
export type Props = Autocomplete.Empty.Props;
}
export namespace Group {
export type Props = Autocomplete.Group.Props;
}
export namespace GroupLabel {
export type Props = Autocomplete.GroupLabel.Props;
}
export namespace Separator {
export type Props = Autocomplete.Separator.Props;
}
export namespace Shortcut {
export interface Props extends React.HTMLAttributes {
className?: string;
}
}
export namespace Toolbar {
export interface Props extends React.HTMLAttributes {
className?: string;
}
}
export namespace Footer {
export interface Props extends React.HTMLAttributes {
className?: string;
}
}
export namespace Panel {
export interface Props extends React.HTMLAttributes {
className?: string;
}
}
export namespace Collection {
export type Props = React.ComponentProps;
}
}
export default Command;
```
## Use Cases
### Simple command palette
A basic command palette with a flat list of items. Type to filter, use arrow keys to navigate, and press Enter to select.
```tsx
const items = ["New File", "Open...", "Save", "Export", "Print"];
(
)}
>
Open Command Palette
{(item: string) => (
{item}
)}
No results found.
```
### Grouped items
Use `Command.Group`, `Command.GroupLabel`, and `Command.Collection` to organize items into sections.
```tsx
const groups = [
{
value: "Suggestions",
items: [
{ value: "linear", label: "Linear" },
{ value: "figma", label: "Figma" },
{ value: "slack", label: "Slack" },
],
},
{
value: "Commands",
items: [
{ value: "clipboard-history", label: "Clipboard History" },
{ value: "import-extension", label: "Import Extension" },
{ value: "system-preferences", label: "System Preferences" },
],
},
];
(
)}
>
Grouped Commands
{(group) => (
{group.value}
{(item) => (
{item.label}
)}
)}
No results found.
```
### With keyboard shortcuts
Use `Command.Shortcut` inside items to display keyboard shortcut hints aligned to the right.
```tsx
const items = [
{ value: "new-file", label: "New File", shortcut: "⌘N" },
{ value: "open", label: "Open...", shortcut: "⌘O" },
{ value: "save", label: "Save", shortcut: "⌘S" },
{ value: "save-as", label: "Save As...", shortcut: "⇧⌘S" },
{ value: "close", label: "Close Window", shortcut: "⌘W" },
{ value: "preferences", label: "Preferences", shortcut: "⌘," },
];
(
)}
>
Commands with Shortcuts
{(item) => (
{item.label}
{item.shortcut && (
{item.shortcut}
)}
)}
No results found.
```
### With toolbar filters
Use `Command.Toolbar` between the input and list to add filter chips, toggles, or any controls. It renders a styled `
` with a bottom border—compose whatever filter UI you need inside it.
```tsx
const [filter, setFilter] = useState(null);
const filtered = filter
? allItems.filter((i) => i.category === filter)
: allItems;
(
)}
>
Search with Filters
{(item) => (
{item.label}
)}
No results found.
```
### With keyboard trigger and footer
Wire a global keyboard shortcut (e.g. `⌘J`) to toggle the command palette. Use `Command.Footer` to display navigation hints with `Kbd` keys.
```tsx
const [open, setOpen] = useState(false);
useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
setOpen((prev) => !prev);
}
};
document.addEventListener("keydown", down);
return () => document.removeEventListener("keydown", down);
}, []);
(
)}
>
Open{" "}
⌘J
{(item) => (
{item}
)}
No results found.
Navigate
Open
Esc Close
```
### Standalone (without dialog)
Use `Command.Panel` to render the command palette inline without a dialog wrapper. Useful for building search experiences embedded directly in a page.
```tsx
const items = ["Calendar", "Search Emoji", "Calculator", "Launch Pad", "Manage Windows"];
{(item) => (
{item}
)}
No results found.
```
---
*Generated from [devie-ui.com/components/command](https://devie-ui.com/components/command)*