Repolode
Enviar
timc1

timc1/kbar

Un componente de React de paleta de comandos (Cmd+K) para añadir a un sitio web un menú de acciones con búsqueda y atajos de teclado.

Ver en GitHubSitio web
Estrellas
5,261
Forks
204
Issues abiertos
0
Último commit
hace 3 meses

¿Qué es?

kbar es una biblioteca de componentes de React para añadir a un sitio web o una aplicación web una paleta de comandos, es decir, un menú del estilo Cmd+K. Los usuarios presionan un atajo para abrir un cuadro de búsqueda y ejecutar cualquier acción que, de otro modo, requeriría recorrer la interfaz a base de clics.

Defines las acciones como objetos simples con un id, un nombre, palabras clave, un atajo de teclado opcional y una función perform. Un único KBarProvider envuelve la aplicación, y la biblioteca incluye componentes de interfaz sin estilos predeterminados, como un portal, un posicionador, un animador, una entrada de búsqueda y una lista de resultados. Hooks como useMatches devuelven resultados filtrados según la consulta actual, y la lista de resultados usa virtualización para manejar grandes conjuntos de acciones.

El proyecto también permite crear acciones anidadas para navegar en varios pasos, deshacer y rehacer acciones mediante el historial, y ofrecer compatibilidad con lectores de pantalla. Los componentes se pueden personalizar o sustituir por completo mediante la estructura de datos subyacente.

Funciones clave

  • 01Se pueden registrar atajos de teclado para acciones individuales.
  • 02Las acciones anidadas permiten navegar en varios pasos.
  • 03Lista de resultados virtualizada para grandes cantidades de acciones.
  • 04Deshacer y rehacer mediante el historial de acciones.
  • 05Animaciones integradas y componentes personalizables.
  • 06Compatibilidad integrada con lectores de pantalla.

Casos de uso

  • Añadir un menú de búsqueda y navegación Cmd+K a un sitio de documentación o contenido hecho con React.
  • Permitir que los usuarios ejecuten acciones de la aplicación con el teclado en un panel de control SaaS.
  • Crear un menú de acceso rápido a páginas y ajustes en una aplicación web.

Inicio rápido

  1. 1

    Instala kbar desde npm

    npm install kbar
  2. 2

    Envuelve tu app con KBarProvider y añade los componentes de UI

  3. 3

    Pulsa cmd+k (macOS) o ctrl+k (Linux/Windows) para abrir el menú de comandos

Temas

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

Preguntas frecuentes

¿Qué es kbar?
Un componente de React de paleta de comandos (Cmd+K) para añadir a un sitio web un menú de acciones con búsqueda y atajos de teclado. kbar es una biblioteca de componentes de React para añadir a un sitio web o una aplicación web una paleta de comandos, es decir, un menú del estilo Cmd+K. Los usuarios presionan un atajo para abrir un cuadro de búsqueda y ejecutar cualquier acción que, de otro modo, requeriría recorrer la interfaz a base de clics.
¿kbar es gratuito? ¿Qué licencia tiene?
kbar es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿kbar sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de kbar fue el 10 ago 2026.
¿Para qué puedo usar kbar?
Añadir un menú de búsqueda y navegación Cmd+K a un sitio de documentación o contenido hecho con React. Permitir que los usuarios ejecuten acciones de la aplicación con el teclado en un panel de control SaaS. Crear un menú de acceso rápido a páginas y ajustes en una aplicación web.
¿Cómo se instala kbar?
Instala kbar desde npm: npm install kbar Envuelve tu app con KBarProvider y añade los componentes de UI Pulsa cmd+k (macOS) o ctrl+k (Linux/Windows) para abrir el menú de comandos
¿Dónde consigo kbar?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/timc1/kbar

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados