Repolode
timc1

timc1/kbar

웹사이트에 검색 가능한 액션 메뉴와 키보드 단축키를 추가하는 React 커맨드 팔레트(Cmd+K) 컴포넌트입니다.

스타
5,261
포크
204
열린 이슈
0
마지막 커밋
3개월 전

어떤 프로젝트인가요?

kbar는 웹사이트나 웹 앱에 Cmd+K 방식의 커맨드 팔레트를 추가하는 React 컴포넌트 라이브러리입니다. 사용자는 단축키를 눌러 검색창을 열고, 인터페이스를 직접 탐색해야 했던 작업을 실행할 수 있습니다.

id, name, keywords, 선택적 키보드 단축키, perform 함수가 포함된 일반 객체로 액션을 정의합니다. 앱 전체를 하나의 KBarProvider로 감싸면 되며, 라이브러리는 기본 스타일이 없는 portal, positioner, animator, 검색 입력창, 결과 목록 등의 UI 요소를 제공합니다. useMatches 같은 훅은 현재 검색어를 기준으로 결과를 필터링하며, 액션이 많을 때도 결과 목록을 가상화해 표시합니다.

또한 여러 단계로 이동할 수 있는 중첩 액션, 액션 기록을 통한 실행 취소 및 다시 실행, 스크린 리더 지원을 제공합니다. 기반 데이터 구조를 활용해 컴포넌트를 원하는 대로 수정하거나 완전히 대체할 수 있습니다.

핵심 기능

  • 01각 액션에 키보드 단축키를 등록할 수 있습니다.
  • 02중첩 액션으로 여러 단계의 이동을 지원합니다.
  • 03액션이 많을 때 가상화된 결과 목록을 제공합니다.
  • 04액션 기록을 통해 실행 취소 및 다시 실행을 지원합니다.
  • 05애니메이션을 내장하고 컴포넌트를 커스터마이즈할 수 있습니다.
  • 06스크린 리더를 기본 지원합니다.

활용 사례

  • React 문서 사이트나 콘텐츠 사이트에 Cmd+K 검색 및 탐색 메뉴를 추가할 때.
  • SaaS 대시보드에서 사용자가 키보드로 앱 액션을 실행할 수 있도록 할 때.
  • 웹 앱에서 페이지와 설정으로 빠르게 이동하는 메뉴를 만들 때.

빠른 시작

  1. 1

    npm에서 kbar를 설치합니다

    npm install kbar
  2. 2

    앱을 KBarProvider로 감싸고 UI 컴포넌트를 추가합니다

  3. 3

    cmd+k(macOS) 또는 ctrl+k(Linux/Windows)를 눌러 명령 메뉴를 엽니다

토픽

자주 묻는 질문

kbar은(는) 무엇인가요?
웹사이트에 검색 가능한 액션 메뉴와 키보드 단축키를 추가하는 React 커맨드 팔레트(Cmd+K) 컴포넌트입니다. kbar는 웹사이트나 웹 앱에 Cmd+K 방식의 커맨드 팔레트를 추가하는 React 컴포넌트 라이브러리입니다. 사용자는 단축키를 눌러 검색창을 열고, 인터페이스를 직접 탐색해야 했던 작업을 실행할 수 있습니다.
kbar은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
kbar은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
kbar은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. kbar의 마지막 커밋은 2026년 8월 10일입니다.
kbar은(는) 어디에 사용할 수 있나요?
React 문서 사이트나 콘텐츠 사이트에 Cmd+K 검색 및 탐색 메뉴를 추가할 때. SaaS 대시보드에서 사용자가 키보드로 앱 액션을 실행할 수 있도록 할 때. 웹 앱에서 페이지와 설정으로 빠르게 이동하는 메뉴를 만들 때.
kbar는 어떻게 설치하나요?
npm에서 kbar를 설치합니다: npm install kbar 앱을 KBarProvider로 감싸고 UI 컴포넌트를 추가합니다 cmd+k(macOS) 또는 ctrl+k(Linux/Windows)를 눌러 명령 메뉴를 엽니다
kbar은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/timc1/kbar

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트