Visão geral

O Command é uma paleta de busca extensível baseada em cmdk. Pode ser embutida inline ou exibida em um Dialog.

Demo inline

Import

import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@/components/ui/command"

Sub-componentes

O Command é composto por várias partes que trabalham juntas para criar a experiência de busca.

Command

Container raiz. Gerencia o estado de busca e filtro dos itens.

CommandInput

Campo de texto de busca. Filtra os CommandItems automaticamente.

CommandList

Container da lista de resultados. Gerencia scroll e visibilidade.

CommandEmpty

Exibido quando nenhum item corresponde à busca.

CommandGroup

Agrupa itens relacionados com um cabeçalho opcional (heading prop).

CommandItem

Item individual da lista. Selecionável por teclado e mouse.

CommandSeparator

Divisor visual entre grupos.

CommandShortcut

Exibe atalho de teclado à direita de um item.

Padrão de implementação

Snippets para os contextos mais comuns do Command no projeto.

Command inline

<Command className="rounded-[10px] border border-border">
  <CommandInput placeholder="Buscar..." />
  <CommandList>
    <CommandEmpty>Sem resultados.</CommandEmpty>
    <CommandGroup heading="Ações">
      <CommandItem onSelect={() => { /* ação */ }}>
        Criar novo item
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Command Dialog (paleta de comandos)

"use client"
import { useState, useEffect } from "react"
import { CommandDialog, CommandInput, CommandList, ... } from "@/components/ui/command"

export function PaletaDeComandos() {
  const [open, setOpen] = useState(false)

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen(true)
      }
    }
    window.addEventListener("keydown", handler)
    return () => window.removeEventListener("keydown", handler)
  }, [])

  return (
    <CommandDialog open={open} onOpenChange={setOpen}>
      <CommandInput placeholder="Digite um comando..." />
      <CommandList>
        <CommandGroup heading="Navegação">
          <CommandItem onSelect={() => setOpen(false)}>Dashboard</CommandItem>
          <CommandItem onSelect={() => setOpen(false)}>Configurações</CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  )
}

Props e uso

API dos principais sub-componentes do Command.

CommandItem

value

string

Valor usado para filtrar o item. Se não informado, usa o texto do children.

onSelect

(value: string) => void

Callback chamado ao selecionar o item.

disabled

boolean

Desabilita o item.

keywords

string[]

Palavras-chave adicionais para busca (além do texto visível).

Acessibilidade

O Command usa role="combobox" e aria-haspopup="listbox" automaticamente.

Navegação por teclado: setas para mover, Enter para selecionar, Escape para fechar (no Dialog).

O CommandDialog usa Dialog do shadcn e herda seu suporte completo a foco preso e ARIA.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter