Ravox KitSobreposição
Comando
Paleta de comandos: busca que filtra enquanto digita sem ligar para acento, grupos com título, sinônimos, atalhos e o vazio. Solta na página ou num diálogo nativo que abre com ⌘K / Ctrl+K. Setas circulam, Enter escolhe, Esc limpa e fecha.
Ajustes
Exemplos
No diálogo, com ⌘K
Busca no servidor
Instalação
O shadcn cria components/ui/comando.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/comando.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| <Comando busca aoBuscar> | string / (busca) => void | — | A raiz. Controle a busca quando os resultados vêm do servidor. |
| filtro | (texto, busca) => boolean | — | Troca o filtro. O padrão exige cada palavra digitada no texto do item, sem acento nem maiúscula. |
| filtrar | boolean | true | false: mostra todos os itens (você filtra no servidor). |
| <ComandoBusca placeholder fim> | string / ReactNode | — | O campo de busca (combobox). fim põe algo à direita, como um giro. |
| <ComandoLista> | ComponentProps<"div"> | — | A lista (listbox) que rola; o item ativo fica sempre à vista. |
| <ComandoGrupo titulo> | ReactNode | — | Grupo com título. Some sozinho quando nenhum item dele passa no filtro. |
| <ComandoItem valor palavras icone atalho aoEscolher> | string / string[] / ReactNode / string / (valor) => void | — | Um resultado. valor (padrão: o texto) e palavras entram na busca; atalho é só o texto mostrado (ex.: "G P"). |
| <ComandoVazio> / <ComandoCarregando> / <ComandoSeparador> | — | — | Sem resultado, esperando o servidor e linha entre grupos (some durante a busca). |
| <ComandoDialogo aberto aoMudar atalho> | boolean / (aberto) => void / string | false | atalho "k" | A paleta num <dialog> nativo: foco preso, Esc fecha e o foco volta. ⌘K ou Ctrl+K abre e fecha. |
| fecharAoEscolher / rotulo | boolean / string | true / "Paleta de comandos" | No diálogo: fecha ao escolher, e o nome lido pelos leitores de tela. |