kbar – command+k interface for your site
source link: https://kbar.vercel.app/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
kbar is a fully extensible command+k interface for your site. Try it out – press cmd and k, or click the logo above.
Background
Command+k interfaces are used to create a web experience where any type of action users would be able to do via clicking can be done through a command menu.
With macOS's Spotlight and Linear's command+k experience in mind, kbar aims to be a simple abstraction to add a fast and extensible command+k menu to your site.
Features
- Built in animations, fully customizable
- Keyboard navigation support; e.g. ctrl n / ctrl p for the navigation wizards
- Keyboard shortcuts support for registering keystrokes to specific actions; e.g. hit t for Twitter
- Navigate between nested actions with backspace
- A simple data structure which enables anyone to easily build their custom components
Usage
Have a fully functioning command menu for your site in minutes. Let's start with a basic example. First, install kbar.
At the root of your site, import and wrap the site with a KBarProvider
.
kbar is built on top of actions
. Actions define what to execute when a user selects it. Actions can have children which are just other actions.
Let's create a few static actions. Static actions are actions with no external dependencies; they don't rely on a method from some other hook, for instance. We'll talk about dynamic actions later.
kbar exposes a few components which handle animations, keyboard events, etc. You can compose them together like so:
Hit cmd
+k
and you should see a primitive command menu. kbar allows you to have full control over all aspects of your command menu – refer to the docs to get an understanding of further capabilities.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK