Meet Frontfriend.Your brand. Your rules. Your agents, connected.Explore what’s new
Frontfriend
DocumentationCommand

Command

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID. 

pnpm exec frontfriend download command -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Command } from "@/components/ui/command";
import { CommandInput } from "@/components/ui/command";
import { CommandList } from "@/components/ui/command";
import { CommandEmpty } from "@/components/ui/command";
import { CommandGroup } from "@/components/ui/command";
import { CommandItem } from "@/components/ui/command";
import * as UI from "@/components/ui/command";

const Component = UI.Command;

const args = {
  "label": "Quick actions",
  "shouldFilter": true,
  "placeholder": "Search actions...",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Command :label="args.label" :should-filter="args.shouldFilter"
    ><CommandInput :placeholder="args.placeholder" /><CommandList
      ><CommandEmpty>No results.</CommandEmpty
      ><CommandGroup heading="Actions"
        ><CommandItem value="copy">Copy</CommandItem
        ><CommandItem value="paste">Paste</CommandItem></CommandGroup
      ></CommandList
    ></Command
  >
</template>

Examples

Basic

<script setup lang="ts">
import { ref } from "vue";
import { Button } from "@/components/ui/button";
import { CommandDialog } from "@/components/ui/command";
import { CommandInput } from "@/components/ui/command";
import { CommandList } from "@/components/ui/command";
import { CommandEmpty } from "@/components/ui/command";
import { CommandGroup } from "@/components/ui/command";
import { CommandItem } from "@/components/ui/command";
import * as UI from "@/components/ui/command";

const Component = UI.Command;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const open = ref(false);
</script>

<template>
  <div class="flex flex-col gap-4">
    <Button variant="outline" class="w-fit" @click="open = true"
      >Open Menu</Button
    >
    <CommandDialog v-model:open="open">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem value="calendar">Calendar</CommandItem>
          <CommandItem value="search-emoji">Search Emoji</CommandItem>
          <CommandItem value="calculator">Calculator</CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  </div>
</template>

Shortcuts

<script setup lang="ts">
import { ref } from "vue";
import { Button } from "@/components/ui/button";
import { CommandDialog } from "@/components/ui/command";
import { CommandInput } from "@/components/ui/command";
import { CommandList } from "@/components/ui/command";
import { CommandEmpty } from "@/components/ui/command";
import { CommandGroup } from "@/components/ui/command";
import { CommandItem } from "@/components/ui/command";
import { UserIcon } from "lucide-vue-next";
import { CommandShortcut } from "@/components/ui/command";
import { CreditCardIcon } from "lucide-vue-next";
import { SettingsIcon } from "lucide-vue-next";
import * as UI from "@/components/ui/command";

const Component = UI.Command;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const open = ref(false);
</script>

<template>
  <div class="flex flex-col gap-4">
    <Button variant="outline" class="w-fit" @click="open = true"
      >Open Menu</Button
    >
    <CommandDialog v-model:open="open">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Settings">
          <CommandItem value="profile-p"
            ><UserIcon /><span>Profile</span
            ><CommandShortcut>⌘P</CommandShortcut></CommandItem
          >
          <CommandItem value="billing-b"
            ><CreditCardIcon /><span>Billing</span
            ><CommandShortcut>⌘B</CommandShortcut></CommandItem
          >
          <CommandItem value="settings-s"
            ><SettingsIcon /><span>Settings</span
            ><CommandShortcut>⌘S</CommandShortcut></CommandItem
          >
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  </div>
</template>

Groups

<script setup lang="ts">
import { ref } from "vue";
import { Button } from "@/components/ui/button";
import { CommandDialog } from "@/components/ui/command";
import { CommandInput } from "@/components/ui/command";
import { CommandList } from "@/components/ui/command";
import { CommandEmpty } from "@/components/ui/command";
import { CommandGroup } from "@/components/ui/command";
import { CommandItem } from "@/components/ui/command";
import { CalendarIcon } from "lucide-vue-next";
import { SmileIcon } from "lucide-vue-next";
import { CalculatorIcon } from "lucide-vue-next";
import { CommandSeparator } from "@/components/ui/command";
import { UserIcon } from "lucide-vue-next";
import { CommandShortcut } from "@/components/ui/command";
import { CreditCardIcon } from "lucide-vue-next";
import { SettingsIcon } from "lucide-vue-next";
import * as UI from "@/components/ui/command";

const Component = UI.Command;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const open = ref(false);
</script>

<template>
  <div class="flex flex-col gap-4">
    <Button variant="outline" class="w-fit" @click="open = true"
      >Open Menu</Button
    >
    <CommandDialog v-model:open="open">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem value="calendar"
            ><CalendarIcon /><span>Calendar</span></CommandItem
          >
          <CommandItem value="search-emoji"
            ><SmileIcon /><span>Search Emoji</span></CommandItem
          >
          <CommandItem value="calculator"
            ><CalculatorIcon /><span>Calculator</span></CommandItem
          >
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem value="profile-p"
            ><UserIcon /><span>Profile</span
            ><CommandShortcut>⌘P</CommandShortcut></CommandItem
          >
          <CommandItem value="billing-b"
            ><CreditCardIcon /><span>Billing</span
            ><CommandShortcut>⌘B</CommandShortcut></CommandItem
          >
          <CommandItem value="settings-s"
            ><SettingsIcon /><span>Settings</span
            ><CommandShortcut>⌘S</CommandShortcut></CommandItem
          >
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  </div>
</template>

Scrollable

<script setup lang="ts">
import { ref } from "vue";
import { Button } from "@/components/ui/button";
import { CommandDialog } from "@/components/ui/command";
import { CommandInput } from "@/components/ui/command";
import { CommandList } from "@/components/ui/command";
import { CommandEmpty } from "@/components/ui/command";
import { CommandGroup } from "@/components/ui/command";
import { CommandItem } from "@/components/ui/command";
import { HomeIcon } from "lucide-vue-next";
import { CommandShortcut } from "@/components/ui/command";
import { InboxIcon } from "lucide-vue-next";
import { FileTextIcon } from "lucide-vue-next";
import { FolderIcon } from "lucide-vue-next";
import { CommandSeparator } from "@/components/ui/command";
import { PlusIcon } from "lucide-vue-next";
import { FolderPlusIcon } from "lucide-vue-next";
import { CopyIcon } from "lucide-vue-next";
import { ScissorsIcon } from "lucide-vue-next";
import { ClipboardPasteIcon } from "lucide-vue-next";
import { TrashIcon } from "lucide-vue-next";
import { LayoutGridIcon } from "lucide-vue-next";
import { ListIcon } from "lucide-vue-next";
import { ZoomInIcon } from "lucide-vue-next";
import { ZoomOutIcon } from "lucide-vue-next";
import { UserIcon } from "lucide-vue-next";
import { CreditCardIcon } from "lucide-vue-next";
import { SettingsIcon } from "lucide-vue-next";
import { BellIcon } from "lucide-vue-next";
import { HelpCircleIcon } from "lucide-vue-next";
import { CalculatorIcon } from "lucide-vue-next";
import { CodeIcon } from "lucide-vue-next";
import { ImageIcon } from "lucide-vue-next";
import * as UI from "@/components/ui/command";

const Component = UI.Command;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const open = ref(false);
</script>

<template>
  <div class="flex flex-col gap-4">
    <Button variant="outline" class="w-fit" @click="open = true"
      >Open Menu</Button
    >
    <CommandDialog v-model:open="open">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Navigation">
          <CommandItem value="home-h"
            ><HomeIcon /><span>Home</span
            ><CommandShortcut>⌘H</CommandShortcut></CommandItem
          >
          <CommandItem value="inbox-i"
            ><InboxIcon /><span>Inbox</span
            ><CommandShortcut>⌘I</CommandShortcut></CommandItem
          >
          <CommandItem value="documents-d"
            ><FileTextIcon /><span>Documents</span
            ><CommandShortcut>⌘D</CommandShortcut></CommandItem
          >
          <CommandItem value="folders-f"
            ><FolderIcon /><span>Folders</span
            ><CommandShortcut>⌘F</CommandShortcut></CommandItem
          >
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Actions">
          <CommandItem value="new-file-n"
            ><PlusIcon /><span>New File</span
            ><CommandShortcut>⌘N</CommandShortcut></CommandItem
          >
          <CommandItem value="new-folder-n"
            ><FolderPlusIcon /><span>New Folder</span
            ><CommandShortcut>⇧⌘N</CommandShortcut></CommandItem
          >
          <CommandItem value="copy-c"
            ><CopyIcon /><span>Copy</span
            ><CommandShortcut>⌘C</CommandShortcut></CommandItem
          >
          <CommandItem value="cut-x"
            ><ScissorsIcon /><span>Cut</span
            ><CommandShortcut>⌘X</CommandShortcut></CommandItem
          >
          <CommandItem value="paste-v"
            ><ClipboardPasteIcon /><span>Paste</span
            ><CommandShortcut>⌘V</CommandShortcut></CommandItem
          >
          <CommandItem value="delete"
            ><TrashIcon /><span>Delete</span
            ><CommandShortcut>⌫</CommandShortcut></CommandItem
          >
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="View">
          <CommandItem value="grid-view"
            ><LayoutGridIcon /><span>Grid View</span></CommandItem
          >
          <CommandItem value="list-view"
            ><ListIcon /><span>List View</span></CommandItem
          >
          <CommandItem value="zoom-in"
            ><ZoomInIcon /><span>Zoom In</span
            ><CommandShortcut>⌘+</CommandShortcut></CommandItem
          >
          <CommandItem value="zoom-out"
            ><ZoomOutIcon /><span>Zoom Out</span
            ><CommandShortcut>⌘-</CommandShortcut></CommandItem
          >
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Account">
          <CommandItem value="profile-p"
            ><UserIcon /><span>Profile</span
            ><CommandShortcut>⌘P</CommandShortcut></CommandItem
          >
          <CommandItem value="billing-b"
            ><CreditCardIcon /><span>Billing</span
            ><CommandShortcut>⌘B</CommandShortcut></CommandItem
          >
          <CommandItem value="settings-s"
            ><SettingsIcon /><span>Settings</span
            ><CommandShortcut>⌘S</CommandShortcut></CommandItem
          >
          <CommandItem value="notifications"
            ><BellIcon /><span>Notifications</span></CommandItem
          >
          <CommandItem value="help-support"
            ><HelpCircleIcon /><span>Help & Support</span></CommandItem
          >
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Tools">
          <CommandItem value="calculator"
            ><CalculatorIcon /><span>Calculator</span></CommandItem
          >
          <CommandItem value="code-editor"
            ><CodeIcon /><span>Code Editor</span></CommandItem
          >
          <CommandItem value="image-viewer"
            ><ImageIcon /><span>Image Viewer</span></CommandItem
          >
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  </div>
</template>

Keyboard Shortcut

<script setup lang="ts">
import { ref } from "vue";
import { onMounted } from "vue";
import { onBeforeUnmount } from "vue";
import { CommandDialog } from "@/components/ui/command";
import { CommandInput } from "@/components/ui/command";
import { CommandList } from "@/components/ui/command";
import { CommandEmpty } from "@/components/ui/command";
import { CommandGroup } from "@/components/ui/command";
import { CommandItem } from "@/components/ui/command";
import { CalendarIcon } from "lucide-vue-next";
import { SmileIcon } from "lucide-vue-next";
import { CalculatorIcon } from "lucide-vue-next";
import { CommandSeparator } from "@/components/ui/command";
import { UserIcon } from "lucide-vue-next";
import { CommandShortcut } from "@/components/ui/command";
import { CreditCardIcon } from "lucide-vue-next";
import { SettingsIcon } from "lucide-vue-next";
import * as UI from "@/components/ui/command";

const Component = UI.Command;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const open = ref(false);
const onKeydown = (event: KeyboardEvent) => {
  if (event.key === "j" && (event.metaKey || event.ctrlKey)) {
    event.preventDefault();
    open.value = !open.value;
  }
};
onMounted(() => document.addEventListener("keydown", onKeydown));
onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
</script>

<template>
  <div class="flex flex-col gap-4">
    <p class="text-sm text-neutral-subtle">
      Press
      <kbd
        class="pointer-events-none inline-flex h-5 items-center gap-1 rounded border border-neutral-subtle bg-layer-control px-1.5 font-mono text-[10px] font-medium text-neutral-subtle opacity-100 select-none"
        ><span class="text-xs">⌘</span>J</kbd
      >
    </p>
    <CommandDialog v-model:open="open">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem value="calendar"
            ><CalendarIcon /><span>Calendar</span></CommandItem
          >
          <CommandItem value="search-emoji"
            ><SmileIcon /><span>Search Emoji</span></CommandItem
          >
          <CommandItem value="calculator"
            ><CalculatorIcon /><span>Calculator</span></CommandItem
          >
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem value="profile-p"
            ><UserIcon /><span>Profile</span
            ><CommandShortcut>⌘P</CommandShortcut></CommandItem
          >
          <CommandItem value="billing-b"
            ><CreditCardIcon /><span>Billing</span
            ><CommandShortcut>⌘B</CommandShortcut></CommandItem
          >
          <CommandItem value="settings-s"
            ><SettingsIcon /><span>Settings</span
            ><CommandShortcut>⌘S</CommandShortcut></CommandItem
          >
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Command

Prop Type Default Description
class HTMLAttributes["class"] —

CommandDialog

Prop Type Default Description
class string —
description string —
title string —

CommandEmpty

Prop Type Default Description
class HTMLAttributes["class"] —

CommandGroup

Prop Type Default Description
class HTMLAttributes["class"] —
heading string —

CommandInput

Prop Type Default Description
class HTMLAttributes["class"] —

CommandItem

Prop Type Default Description
class HTMLAttributes["class"] —

CommandList

Prop Type Default Description
class HTMLAttributes["class"] —

CommandSeparator

Prop Type Default Description
class HTMLAttributes["class"] —

CommandShortcut

Prop Type Default Description
class HTMLAttributes["class"] —

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.

Components, guides & everything Frontfriend.↵ to open