Command

Fast, composable, unstyled command menu for React.

import { Command } from "@smartacteam/ambient-web/command";
import { CentralIcon } from "@smartacteam/ambient-web/icon";

export function CommandDemo() {
  return (
    <Command.Root className="rounded-lg border border-stroke-default shadow-md md:min-w-112.5">
      <Command.Input placeholder="Type a command or search..." />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Group heading="Suggestions">
          <Command.Item>
            <CentralIcon
              name="IconCalendar1"
              radius="2"
              stroke="1.5"
              fill="outlined"
            />
            <span>Calendar</span>
          </Command.Item>
          <Command.Item>
            <CentralIcon
              name="IconEmojiSmile"
              radius="2"
              stroke="1.5"
              fill="outlined"
            />
            <span>Search Emoji</span>
          </Command.Item>
          <Command.Item disabled>
            <CentralIcon
              name="IconCalculator"
              radius="2"
              stroke="1.5"
              fill="outlined"
            />
            <span>Calculator</span>
          </Command.Item>
        </Command.Group>
        <Command.Separator />
        <Command.Group heading="Settings">
          <Command.Item>
            <CentralIcon
              name="IconPeople"
              radius="2"
              stroke="1.5"
              fill="outlined"
            />
            <span>Profile</span>
            <Command.Shortcut>⌘P</Command.Shortcut>
          </Command.Item>
          <Command.Item>
            <CentralIcon
              name="IconCreditCard2"
              radius="2"
              stroke="1.5"
              fill="outlined"
            />
            <span>Billing</span>
            <Command.Shortcut>⌘B</Command.Shortcut>
          </Command.Item>
          <Command.Item>
            <CentralIcon
              name="IconSettingsSliderHor"
              radius="2"
              stroke="1.5"
              fill="outlined"
            />
            <span>Settings</span>
            <Command.Shortcut>⌘S</Command.Shortcut>
          </Command.Item>
        </Command.Group>
      </Command.List>
    </Command.Root>
  );
}

Usage

import { Command } from "@smartacteam/ambient-web/command";

<Command.Root>
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item>Calendar</Command.Item>
      <Command.Item>Search Emoji</Command.Item>
      <Command.Item>Calculator</Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item>Profile</Command.Item>
      <Command.Item>Billing</Command.Item>
      <Command.Item>Settings</Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

Examples

Dialog

To show the command menu in a dialog, use the <CommandDialog /> component.

Press ⌘J

"use client";

import * as React from "react";

import { Command } from "@smartacteam/ambient-web/command";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Kbd } from "@smartacteam/ambient-web/kbd";

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-sm text-foreground-secondary">
        Press{" "}
        <Kbd.Item>
          <span className="text-xs">⌘</span>J
        </Kbd.Item>
      </p>
      <Command.Dialog open={open} onOpenChange={setOpen}>
        <Command.Root>
          <Command.Input placeholder="Type a command or search..." />
          <Command.List>
            <Command.Empty>No results found.</Command.Empty>
            <Command.Group heading="Suggestions">
              <Command.Item>
                <CentralIcon
                  name="IconCalendar1"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
                <span>Calendar</span>
              </Command.Item>
              <Command.Item>
                <CentralIcon
                  name="IconEmojiSmile"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
                <span>Search Emoji</span>
              </Command.Item>
              <Command.Item disabled>
                <CentralIcon
                  name="IconCalculator"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
                <span>Calculator</span>
              </Command.Item>
            </Command.Group>
            <Command.Separator />
            <Command.Group heading="Settings">
              <Command.Item>
                <CentralIcon
                  name="IconPeople"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
                <span>Profile</span>
                <Command.Shortcut>⌘P</Command.Shortcut>
              </Command.Item>
              <Command.Item>
                <CentralIcon
                  name="IconCreditCard2"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
                <span>Billing</span>
                <Command.Shortcut>⌘B</Command.Shortcut>
              </Command.Item>
              <Command.Item>
                <CentralIcon
                  name="IconSettingsSliderHor"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
                <span>Settings</span>
                <Command.Shortcut>⌘S</Command.Shortcut>
              </Command.Item>
            </Command.Group>
          </Command.List>
        </Command.Root>
      </Command.Dialog>
    </>
  );
}

Command

Usage

Examples

Dialog

Command Palette

Command Palette