Repolode
Предложить
timc1

timc1/kbar

Библиотека компонентов React для добавления на сайт меню команд Cmd+K с поиском и сочетаниями клавиш.

Открыть на GitHubСайт
Звёзды
5,261
Форки
204
Открытые issues
0
Последний коммит
3 месяца назад

Что это?

kbar — библиотека компонентов React, которая добавляет на сайт или в веб-приложение палитру команд — меню в стиле Cmd+K. Пользователь нажимает сочетание клавиш, чтобы открыть поле поиска и запустить любое действие, для которого иначе пришлось бы переходить по интерфейсу и нажимать кнопки.

Вы описываете действия обычными объектами с полями id, name, keywords, необязательным сочетанием клавиш и функцией perform. Приложение оборачивается в один KBarProvider, а библиотека включает UI-компоненты без встроенных стилей по умолчанию: portal, positioner, animator, поле поиска и список результатов. Хуки, например useMatches, возвращают результаты, отфильтрованные по текущему запросу, а список результатов использует виртуализацию при большом количестве действий.

Проект также поддерживает вложенные действия для многоэтапной навигации, отмену и повтор действий через историю, а также работу со скринридерами. Компоненты можно настроить или полностью заменить, используя лежащую в основе структуру данных.

Ключевые возможности

  • 01Для отдельных действий можно задавать сочетания клавиш.
  • 02Вложенные действия поддерживают многоэтапную навигацию.
  • 03Виртуализированный список результатов для большого количества действий.
  • 04Отмена и повтор действий через историю.
  • 05Встроенные анимации и настраиваемые компоненты.
  • 06Встроенная поддержка скринридеров.

Сценарии использования

  • Добавление меню поиска и навигации Cmd+K на сайт документации или контентный сайт на React.
  • Запуск действий приложения с клавиатуры в SaaS-панели управления.
  • Создание меню быстрого перехода к страницам и настройкам веб-приложения.

Быстрый старт

  1. 1

    Установите kbar через npm

    npm install kbar
  2. 2

    Оберните приложение в KBarProvider и добавьте компоненты UI

  3. 3

    Нажмите cmd+k (macOS) или ctrl+k (Linux/Windows), чтобы открыть меню команд

Темы

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

Частые вопросы

Что такое kbar?
Библиотека компонентов React для добавления на сайт меню команд Cmd+K с поиском и сочетаниями клавиш. kbar — библиотека компонентов React, которая добавляет на сайт или в веб-приложение палитру команд — меню в стиле Cmd+K. Пользователь нажимает сочетание клавиш, чтобы открыть поле поиска и запустить любое действие, для которого иначе пришлось бы переходить по интерфейсу и нажимать кнопки.
kbar можно использовать бесплатно? Какая у него лицензия?
kbar распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
kbar всё ещё поддерживается?
Обновлялся за последние 6 месяцев. Последний коммит в kbar — 10 авг. 2026 г..
Для чего можно использовать kbar?
Добавление меню поиска и навигации Cmd+K на сайт документации или контентный сайт на React. Запуск действий приложения с клавиатуры в SaaS-панели управления. Создание меню быстрого перехода к страницам и настройкам веб-приложения.
Как установить kbar?
Установите kbar через npm: npm install kbar Оберните приложение в KBarProvider и добавьте компоненты UI Нажмите cmd+k (macOS) или ctrl+k (Linux/Windows), чтобы открыть меню команд
Где скачать kbar?
Исходный код и инструкции по установке — на GitHub: https://github.com/timc1/kbar

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

microsoft / PowerToys

Набор из более чем 30 утилит для Windows, которые помогают настроить рабочий стол и ускорить повседневные задачи — от раскладки окон до переназначения клавиш.

Продуктивность и приложения#windows#productivity#window-management
140,6 тыс.+342 за неделю8,7 тыс.CMITОбновлён 22 часа назад

algolia / autocomplete

JavaScript-библиотека для создания полей поиска с автодополнением и подсказками, собственными источниками данных и DOM-рендерингом.

Фронтенд и UI#autocomplete#typeahead#search
5,3 тыс.+2 за неделю340TypeScriptMITАктивно поддерживаетсяОбновлён 7 дней назад

vercel / swr

Библиотека React Hooks для загрузки данных: сначала возвращает данные из кэша, а затем обновляет их в фоновом режиме.

Фронтенд и UI#react#data-fetching#hooks
32,5 тыс.1,4 тыс.TypeScriptMITАктивно поддерживаетсяОбновлён 22 дня назад