120k
New

Command

PreviousNext

Command menu for search and quick actions.

About

The <Command /> component uses the cmdk component by Dip.

Installation

pnpm dlx shadcn@latest add @force-ui-svelte/command

Usage

<script lang="ts">
  import * as Command from "@/svelte-ui/command/index.js";
</script>
<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>

Composition

Use the following composition to build a Command:

Command.Root
├── Command.Input
└── Command.List
    ├── Command.Empty
    ├── Command.Group
    │   ├── Command.Item
    │   └── Command.Item
    ├── Command.Separator
    └── Command.Group
        ├── Command.Item
        └── Command.Item

Examples

Basic

A simple command menu in a dialog.

Shortcuts

Groups

A command menu with groups, icons and separators.

Scrollable

Scrollable command menu with multiple items.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the cmdk documentation for more information.