Command

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Command, CommandInput, CommandList, CommandItem, CommandGroup } from "@line/abc-def-react/command";

<script setup lang="ts">
import { Command, CommandInput, CommandList, CommandItem, CommandGroup } from "@line/abc-def-vue/command";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Command,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@line/abc-def-react/command";

export function Example() {
  return (
    <Command>
      <CommandInput placeholder="Search commands" />
      <CommandList>
        <CommandGroup heading="Actions">
          <CommandItem>Copy CSS override</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

<script setup lang="ts">
import {
  Command,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@line/abc-def-vue/command";
</script>

<template>
  <Command>
    <CommandInput placeholder="Search commands" />
    <CommandList>
      <CommandGroup heading="Actions">
        <CommandItem value="copy-css">Copy CSS override</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>

Component tokens

Composition exports

Usage notes

• Group actions by task.
• Include keyboard shortcuts only when they are real app shortcuts.
• Related component tokens use the `command` token group in `@line/abc-def-styles/css`.