Command | COSS for Svelte

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/command.json

Usage

<script lang="ts">
  import * as Command from "$lib/components/ui/command/index.js";
  import { buttonVariants } from "$lib/components/ui/button/index.js";
</script>

<script lang="ts">
  const items = [
    { value: "linear", label: "Linear" },
    { value: "figma", label: "Figma" },
    { value: "slack", label: "Slack" },
  ];
</script>

<Command.DialogRoot>
  <Command.DialogTrigger class={buttonVariants({ variant: "outline" })}>
    Open Command Palette
  </Command.DialogTrigger>

  <Command.DialogPopup aria-label="Command palette">
    <Command.Root {items}>
      <Command.Input placeholder="Search..." />
      <Command.Empty>No results found.</Command.Empty>
      <Command.List>
        <Command.Collection>
          {#snippet children(item)}
            <Command.Item value={item}>{item.label}</Command.Item>
          {/snippet}
        </Command.Collection>
      </Command.List>
    </Command.Root>
  </Command.DialogPopup>
</Command.DialogRoot>

The root component that wraps the autocomplete functionality. It’s an alias for Autocomplete.Root with sensible defaults for command palette behavior: autoHighlight="always", keepHighlight={true}, and open={true}.

Prop	Type	Default	Description
`items`	`readonly unknown[]`	-	The array of items to display in the command
`open`	`boolean`	`true`	Controls whether the command is open
`autoHighlight`	`boolean \\| "always"`	`"always"`	Controls automatic highlighting of items
`keepHighlight`	`boolean`	`true`	Whether to maintain highlight state
`children`	`Snippet`	-	Command content
`...props`	`CommandRootProps`	-	All Shards Autocomplete props are supported

Command.DialogRoot

A wrapper component that provides the dialog root functionality. It’s an alias for Dialog.Root from Shards UI.

Prop	Type	Description
`open`	`boolean`	Controls whether the dialog is open
`onOpenChange`	`(open: boolean) => void`	Called when the open state changes
`children`	`Snippet<[{ payload: Payload \\| undefined }]>`	Dialog content
`...props`	`ComponentProps<typeof Command.DialogRoot>`	All standard dialog props are supported

Command.DialogTrigger

The trigger button that opens the command dialog. Renders as a button by default.

Prop	Type	Description
`as`	`keyof HTMLElementTagNameMap`	Element to render
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	Trigger content
`...props`	`CommandDialogTriggerProps`	All standard dialog trigger attributes are supported

Command.DialogPopup

The popup content container that displays the command palette inside a dialog.

Prop	Type	Description
`class`	`string`	Additional CSS classes to apply to the component
`portalProps`	`CommandDialogPopupProps["portalProps"]`	Props forwarded to the internal portal
`children`	`CommandDialogPopupProps["children"]`	Popup content
`...props`	`CommandDialogPopupProps`	All standard dialog popup attributes are supported

Command.Input

The search input field with an integrated search icon. Automatically includes a search icon via startAddon and is sized to lg by default.

Prop	Type	Description
`placeholder`	`string`	The placeholder text for the input
`class`	`string`	Additional CSS classes to apply to the component
`startAddon`	`Snippet`	Replaces the integrated search icon
`...props`	`CommandInputProps`	All standard autocomplete input attributes are supported

Command.List

A scrollable container for command items. It wraps Autocomplete.List with scroll functionality.

Prop	Type	Description
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	List content
`...props`	`CommandListProps`	All standard autocomplete list attributes are supported

Command.Panel

A container component that provides styling for command content outside of dialogs. Useful when building standalone command interfaces with a bordered, elevated appearance.

Prop	Type	Description
`as`	`"div" \\| "kbd"`	Element to render
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	Panel content
`...props`	`CommandPanelProps`	All standard element attributes are supported

Command.Empty

Displays a message when no results are found.

Prop	Type	Description
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	Empty-state content
`...props`	`CommandEmptyProps`	All standard autocomplete empty attributes are supported

Command.Group

Groups related command items together. Wraps Autocomplete.Group.

Prop	Type	Description
`items`	`readonly unknown[]`	The array of items in this group
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	Group content
`...props`	`CommandGroupProps`	All standard autocomplete group attributes are supported

Command.GroupLabel

Displays a label for a command group.

Prop	Type	Description
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	Label content
`...props`	`CommandGroupLabelProps`	All standard autocomplete group label attributes are supported

Command.Item

An individual selectable command item. Extends Autocomplete.Item.

Prop	Type	Description
`value`	`unknown`	The value of the item
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	Item content
`...props`	`CommandItemProps`	All standard autocomplete item attributes are supported

Command.Separator

A visual separator between command groups or items. Includes default vertical spacing with the my-2 class.

Prop	Type	Description
`class`	`string`	Additional CSS classes to apply to the component
`...props`	`CommandSeparatorProps`	All standard autocomplete separator attributes are supported

Command.Shortcut

Displays keyboard shortcuts in a styled kbd element.

Prop	Type	Description
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	Shortcut text
`...props`	`CommandShortcutProps`	All standard element attributes are supported

Command.Footer

A footer section for displaying hints or additional keyboard shortcuts. Renders as a styled div with padding and border.

Prop	Type	Description
`class`	`string`	Additional CSS classes to apply to the component
`children`	`Snippet`	Footer content
`...props`	`CommandFooterProps`	All standard element attributes are supported

Command.Collection

Used within Command.Group to wrap items when using grouped data. It’s an alias for Autocomplete.Collection from the Autocomplete component.

Prop	Type	Description
`children`	`Snippet<[unknown]>`	Renders each filtered item
`...props`	`ComponentProps<typeof Command.Collection>`	All standard autocomplete collection attributes are supported

Examples

With Keyboard Shortcut

You can add a keyboard shortcut to open the command palette:

<script lang="ts">
  let open = $state(false);

  function down(event: KeyboardEvent) {
    if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
      event.preventDefault();
      open = !open;
    }
  }

  $effect(() => {
    document.addEventListener("keydown", down);
    return () => document.removeEventListener("keydown", down);
  });
</script>

<Command.DialogRoot bind:open>...</Command.DialogRoot>

With Grouped Items

<script lang="ts">
  const groupedItems = [
    {
      value: "Suggestions",
      items: [
        { value: "linear", label: "Linear" },
        { value: "figma", label: "Figma" },
      ],
    },
    {
      value: "Commands",
      items: [
        { value: "clipboard", label: "Clipboard History" },
        { value: "settings", label: "System Preferences" },
      ],
    },
  ];
</script>

<Command.Root items={groupedItems}>
  <Command.Input placeholder="Search..." />
  <Command.Empty>No results found.</Command.Empty>
  <Command.List>
    <Command.Collection>
      {#snippet children(group)}
        <Command.Group items={group.items}>
          <Command.GroupLabel>{group.value}</Command.GroupLabel>
          <Command.Collection>
            {#snippet children(item)}
              <Command.Item value={item.value}>{item.label}</Command.Item>
            {/snippet}
          </Command.Collection>
        </Command.Group>
        <Command.Separator />
      {/snippet}
    </Command.Collection>
  </Command.List>
</Command.Root>

Standalone Command (Without Dialog)

You can use the Command component without a dialog wrapper:

<Command.Root open {items}>
  <Command.Input placeholder="Type a command..." />
  <Command.Empty>No results found.</Command.Empty>
  <Command.List>
    <Command.Collection>
      {#snippet children(item)}
        <Command.Item value={item.value}>{item.label}</Command.Item>
      {/snippet}
    </Command.Collection>
  </Command.List>
</Command.Root>