9.7k

Command

PreviousNext

Fast, composable, unstyled command menu for Vue.

Docs API Reference 
<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import {
  VCommand,
  VCommandEmpty,
  VCommandGroup,
  VCommandInput,
  VCommandItem,
  VCommandList,
  VCommandSeparator,
  VCommandShortcut,
} from '@ui-kit/src/components/Base/VCommand'
</script>

<template>
  <VCommand class="w-full max-w-md">
    <VCommandInput placeholder="Search components..." />
    <VCommandList>
      <VCommandEmpty>
        No matching components found.
      </VCommandEmpty>
      <VCommandGroup heading="Common">
        <VCommandItem value="button">
          <div class="flex w-full items-center justify-between gap-4">
            <span>Button</span>
            <VCommandShortcut>⌘B</VCommandShortcut>
          </div>
        </VCommandItem>
        <VCommandItem value="card">
          <div class="flex w-full items-center justify-between gap-4">
            <span>Card</span>
            <VCommandShortcut>⌘K</VCommandShortcut>
          </div>
        </VCommandItem>
      </VCommandGroup>
      <VCommandSeparator />
      <VCommandGroup heading="Status">
        <VCommandItem value="deployed">
          Deployed
        </VCommandItem>
        <VCommandItem value="review">
          Ready for review
        </VCommandItem>
      </VCommandGroup>
    </VCommandList>
  </VCommand>
</template>

Installation

pnpm dlx shadcn-vue@latest add command

Usage

<script setup lang="ts">
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@/components/ui/command'
</script>

<template>
  <Command>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem>Calendar</CommandItem>
        <CommandItem>Search Emoji</CommandItem>
        <CommandItem>Calculator</CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Settings">
        <CommandItem>Profile</CommandItem>
        <CommandItem>Billing</CommandItem>
        <CommandItem>Settings</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>
ComboboxContext Menu