dotUI

Command

A command menu allows users to search and execute commands.

Overview

Examples

<Command>
  <CommandInput />
  <CommandContent className="min-h-48">
    <CommandItem textValue="Create new file">
      Create new file...
    </CommandItem>
    <CommandItem textValue="Create new folder">
      Create new folder...
    </CommandItem>
    <CommandItem textValue="Assign to">Assign to...</CommandItem>
    <CommandItem textValue="Assign to me">Assign to me</CommandItem>
    <CommandItem textValue="Change status">Change status...</CommandItem>
    <CommandItem textValue="Change priority">
      Change priority...
    </CommandItem>
    <CommandItem textValue="Add label">Add label...</CommandItem>
    <CommandItem textValue="Remove label">Remove label...</CommandItem>
  </CommandContent>
</Command>

Installation

npm

pnpm

yarn

bun

pnpm dlx shadcn@latest add @dotui/command

Usage

Use command menus to provide users with a searchable list of commands or actions.

import {
  Command,
  CommandContent,
  CommandInput,
  CommandItem,
} from "@/components/ui/command";

<Command>
  <CommandInput placeholder="Type a command..." />
  <CommandContent>
    <CommandItem textValue="Create file">Create new file</CommandItem>
    <CommandItem textValue="Open file">Open file</CommandItem>
  </CommandContent>
</Command>

Playground

Use the controls below to experiment with different command props and see the live preview and code update.

placeholder

<Dynamic(Command) className="w-[300px]">
  <Unknown placeholder="Type a command..." />
  <Unknown>
    <Unknown>
      <Dynamic(ListBoxSectionHeader)>Actions</Dynamic(ListBoxSectionHeader)>
      <Unknown textValue="Create new file">Create new file</Unknown>
      <Unknown textValue="Create new folder">Create new folder</Unknown>
      <Unknown textValue="Open file">Open file</Unknown>
    </Unknown>
  </Unknown>
</Dynamic(Command)>

API Reference

Command

Missing description.

Supports all div attributes.

CommandInput

Missing description.

Prop	Type	Default
	`string`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`union`	`—`
	`string`	`—`
	`string`	`—`
	`union`	`—`
	`union`	`'search'`
	`ReactNode \| function`	`—`

	`string`	`—`
	`string`	`—`
	`function`	`—`

CommandContent

Missing description.

Prop	Type	Default
	`boolean`	`—`
	`boolean`	`—`
	`DragAndDropHooks<NoInfer<T>>`	`—`
	`"grid" \| "stack"`	`'stack'`
	`Orientation`	`'vertical'`

	`ReactNode \| function`	`—`
	`Iterable<T>`	`—`
	`ReactNode \| function`	`—`
	`readonly any[]`	`—`

	`SelectionMode`	`—`
	`SelectionBehavior`	`"toggle"`
	`Iterable<Key> \| "all"`	`—`
	`Iterable<Key> \| "all"`	`—`
	`function`	`—`
	`Iterable<Key>`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`"none" \| "clearSelection"`	`'clearSelection'`

dotUI

Command

Installation

Usage

Playground

API Reference

Command

CommandInput

CommandContent

On this page

On this page

dotUI

Product

Community

Support