Command

Preview

 
import { Calculator, Calendar, CreditCard, Settings, Smile, User } from "lucide-react";


import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    CommandSeparator,
    CommandShortcut,
} from "@/registry/components/command/react/command";


export function CommandDemo() {
    return (
        <Command style={{ "width": "450px" } as React.CSSProperties}>
            <CommandInput placeholder="Type a command or search..." />
            <CommandList>
                <CommandEmpty>No results found.</CommandEmpty>
                <CommandGroup heading="Suggestions">
                    <CommandItem>
                        <Calendar />
                        <span>Calendar</span>
                    </CommandItem>
                    <CommandItem>
                        <Smile />
                        <span>Search Emoji</span>
                    </CommandItem>
                    <CommandItem disabled>
                        <Calculator />
                        <span>Calculator</span>
                    </CommandItem>
                </CommandGroup>
                <CommandSeparator />
                <CommandGroup heading="Settings">
                    <CommandItem>
                        <User />
                        <span>Profile</span>
                        <CommandShortcut>⌘P</CommandShortcut>
                    </CommandItem>
                    <CommandItem>
                        <CreditCard />
                        <span>Billing</span>
                        <CommandShortcut>⌘B</CommandShortcut>
                    </CommandItem>
                    <CommandItem>
                        <Settings />
                        <span>Settings</span>
                        <CommandShortcut>⌘S</CommandShortcut>
                    </CommandItem>
                </CommandGroup>
            </CommandList>
        </Command>
    );
}

Installation

You can add the command component in two ways:

  1. During project initialization:
pnpm dlx make-sugarcube@latest init
npx make-sugarcube@latest init
yarn make-sugarcube@latest init
bunx --bun make-sugarcube@latest init

Then select the command component when prompted.

  1. After initialization:
pnpm dlx make-sugarcube@latest components command --framework react
npx make-sugarcube@latest components command --framework react
yarn make-sugarcube@latest components command --framework react
bunx --bun make-sugarcube@latest components command --framework react

What’s included

When you add the command component, you get:

  • command.tsx - The React component implementation
  • command.css - The base styles for the command
  • @clsx - The clsx utility for conditional classes
"use client";


import cn from "clsx";
import { Command as CommandPrimitive } from "cmdk";
import { SearchIcon } from "lucide-react";


import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogTitle,
} from "@/registry/components/dialog/react/dialog";


function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
    return <CommandPrimitive data-slot="command" className={cn("command", className)} {...props} />;
}


function CommandDialog({
    title = "Command Palette",
    description = "Search for a command to run...",
    children,
    className,
    showCloseButton = true,
    ...props
}: React.ComponentProps<typeof Dialog> & {
    title?: string;
    description?: string;
    className?: string;
    showCloseButton?: boolean;
}) {
    return (
        <Dialog {...props}>
            <DialogTitle className="visually-hidden">{title}</DialogTitle>
            <DialogDescription className="visually-hidden">{description}</DialogDescription>
            <DialogContent className={cn(className)}>
                <Command className="">{children}</Command>
            </DialogContent>
        </Dialog>
    );
}


function CommandInput({
    className,
    ...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
    return (
        <div data-slot="command-input-wrapper" className="command-input-wrapper">
            <SearchIcon />
            <CommandPrimitive.Input
                data-slot="command-input"
                className={cn("command-input", className)}
                {...props}
            />
        </div>
    );
}


function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
    return (
        <CommandPrimitive.List
            data-slot="command-list"
            className={cn("command-list", className)}
            {...props}
        />
    );
}


function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
    return (
        <CommandPrimitive.Empty data-slot="command-empty" className="command-empty" {...props} />
    );
}


function CommandGroup({
    className,
    ...props
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
    return (
        <CommandPrimitive.Group
            data-slot="command-group"
            className={cn("command-group", className)}
            {...props}
        />
    );
}


function CommandSeparator({
    className,
    ...props
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
    return (
        <CommandPrimitive.Separator
            data-slot="command-separator"
            className={cn("command-separator", className)}
            {...props}
        />
    );
}


function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
    return (
        <CommandPrimitive.Item
            data-slot="command-item"
            className={cn("command-item", className)}
            {...props}
        />
    );
}


function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
    return (
        <span
            data-slot="command-shortcut"
            className={cn("command-shortcut", className)}
            {...props}
        />
    );
}


export {
    Command,
    CommandDialog,
    CommandInput,
    CommandList,
    CommandEmpty,
    CommandGroup,
    CommandItem,
    CommandShortcut,
    CommandSeparator,
};
.command {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    max-width: calc(100vw - 2rem);
    background-color: var(--command-bg);
    color: var(--command-fg);
    box-shadow: var(--command-shadow);
    border-radius: var(--command-radius);
    border-style: var(--command-border-style);
    border-width: var(--command-border-width);
    border-color: var(--command-border-color);
    font-size: var(--command-font-size);
}


.command svg,
.command-shortcut,
.command [cmdk-group-heading] {
    color: var(--text-muted);
}


.command-separator {
    height: var(--command-separator-height);
    background-color: var(--command-separator-bg);
}


.command-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-inline: var(--command-input-wrapper-padding-inline);
    border-bottom-width: var(--command-input-border-width);
    border-bottom-style: var(--command-input-border-style);
    border-bottom-color: var(--command-input-border-color);
}


.command-input {
    flex: 1;
    border: none;
    box-shadow: none;
    outline-style: none;
    --input-padding-inline: 0;
}


.command-group {
    padding: var(--command-group-padding);
    overflow: hidden;
}


[cmdk-group-heading] {
    font-size: var(--text-xs);
    padding-block: var(--command-group-heading-padding-block);
    padding-inline: var(--command-group-heading-padding-inline);
}


.command-item {
    display: flex;
    align-items: center;
    user-select: none;
    gap: var(--space-2xs);
    padding-block: var(--command-item-padding-block);
    padding-inline: var(--command-item-padding-inline);
    border-radius: var(--command-item-radius);
}


.command-item[data-selected="true"] {
    background-color: var(--command-item-selected-bg);
}


.command-item[data-disabled="true"] {
    color: var(--text-disabled);
}


.command-shortcut {
    margin-inline-start: auto;
    letter-spacing: var(--tracking-wide);
}


.command-empty {
    text-align: center;
    padding-block: var(--command-empty-padding-block);
}


.command-list {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: var(--command-list-max-height);
    scroll-padding-block: var(--command-list-scroll-padding-block);
}

Examples

:::note The following examples show how to use data attributes for variants. This is just one possible approach. See the principles section for more information on how to approach component variants. :::

Command Dialog

Press ⌘J

 
import { Calculator, Calendar, CreditCard, Settings, Smile, User } from "lucide-react";
import * as React from "react";


import {
    CommandDialog,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
    CommandSeparator,
    CommandShortcut,
} from "@/registry/components/command/react/command";


export function CommandDialogDemo() {
    const [open, setOpen] = React.useState(false);


    React.useEffect(() => {
        const down = (e: KeyboardEvent) => {
            if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
                e.preventDefault();
                setOpen((open) => !open);
            }
        };


        document.addEventListener("keydown", down);
        return () => document.removeEventListener("keydown", down);
    }, []);


    return (
        <>
            <p className="text-muted">
                Press{" "}
                <kbd className="">
                    <span className="">⌘</span>J
                </kbd>
            </p>
            <CommandDialog open={open} onOpenChange={setOpen}>
                <CommandInput placeholder="Type a command or search..." />
                <CommandList>
                    <CommandEmpty>No results found.</CommandEmpty>
                    <CommandGroup heading="Suggestions">
                        <CommandItem>
                            <Calendar />
                            <span>Calendar</span>
                        </CommandItem>
                        <CommandItem>
                            <Smile />
                            <span>Search Emoji</span>
                        </CommandItem>
                        <CommandItem>
                            <Calculator />
                            <span>Calculator</span>
                        </CommandItem>
                    </CommandGroup>
                    <CommandSeparator />
                    <CommandGroup heading="Settings">
                        <CommandItem>
                            <User />
                            <span>Profile</span>
                            <CommandShortcut>⌘P</CommandShortcut>
                        </CommandItem>
                        <CommandItem>
                            <CreditCard />
                            <span>Billing</span>
                            <CommandShortcut>⌘B</CommandShortcut>
                        </CommandItem>
                        <CommandItem>
                            <Settings />
                            <span>Settings</span>
                            <CommandShortcut>⌘S</CommandShortcut>
                        </CommandItem>
                    </CommandGroup>
                </CommandList>
            </CommandDialog>
        </>
    );
}