Repolode
Enviar
timc1

timc1/kbar

Uma biblioteca React de command palette (Cmd+K) para adicionar a um site um menu de ações pesquisável com atalhos de teclado.

Ver no GitHubSite
Estrelas
5,261
Forks
204
Issues abertas
0
Último commit
há 3 meses

O que é?

kbar é uma biblioteca de componentes React para adicionar uma command palette — o menu no estilo Cmd+K — a um site ou app web. Os usuários pressionam um atalho para abrir uma caixa de busca e executar qualquer ação que, de outra forma, exigiria navegar pela interface com cliques.

Você define as ações como objetos simples com id, name, keywords, um atalho de teclado opcional e uma função perform. Um único KBarProvider envolve o app, e a biblioteca inclui componentes de UI sem estilos por padrão, como portal, posicionador, animador, campo de busca e lista de resultados. Hooks como useMatches retornam resultados filtrados com base na consulta atual, e a lista de resultados é virtualizada para conjuntos grandes de ações.

O projeto também oferece suporte a ações aninhadas para navegação em várias etapas, desfazer e refazer por meio do histórico de ações e compatibilidade com leitores de tela. Os componentes podem ser personalizados ou totalmente substituídos usando a estrutura de dados subjacente.

Recursos principais

  • 01É possível registrar atalhos de teclado para ações individuais.
  • 02Ações aninhadas permitem navegação em várias etapas.
  • 03Lista de resultados virtualizada para grandes quantidades de ações.
  • 04Desfazer e refazer por meio do histórico de ações.
  • 05Animações integradas e componentes personalizáveis.
  • 06Compatibilidade integrada com leitores de tela.

Casos de uso

  • Adicionar um menu de busca e navegação Cmd+K a um site React de documentação ou conteúdo.
  • Permitir que usuários acionem ações do app pelo teclado em um dashboard SaaS.
  • Criar um menu de acesso rápido a páginas e configurações em um app web.

Início rápido

  1. 1

    Instale o kbar pelo npm

    npm install kbar
  2. 2

    Envolva seu app com KBarProvider e adicione os componentes de UI

  3. 3

    Pressione cmd+k (macOS) ou ctrl+k (Linux/Windows) para abrir o menu de comandos

Tópicos

#react#command-palette#keyboard-shortcuts#typescript#ui-component#accessibility#hooks#javascript#shortcuts

Perguntas frequentes

O que é kbar?
Uma biblioteca React de command palette (Cmd+K) para adicionar a um site um menu de ações pesquisável com atalhos de teclado. kbar é uma biblioteca de componentes React para adicionar uma command palette — o menu no estilo Cmd+K — a um site ou app web. Os usuários pressionam um atalho para abrir uma caixa de busca e executar qualquer ação que, de outra forma, exigiria navegar pela interface com cliques.
kbar é gratuito? Qual é a licença?
kbar é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
kbar ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de kbar foi em 10 de ago. de 2026.
Para que posso usar kbar?
Adicionar um menu de busca e navegação Cmd+K a um site React de documentação ou conteúdo. Permitir que usuários acionem ações do app pelo teclado em um dashboard SaaS. Criar um menu de acesso rápido a páginas e configurações em um app web.
Como instalar kbar?
Instale o kbar pelo npm: npm install kbar Envolva seu app com KBarProvider e adicione os componentes de UI Pressione cmd+k (macOS) ou ctrl+k (Linux/Windows) para abrir o menu de comandos
Onde consigo kbar?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/timc1/kbar

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados