Keyboard Key

Keyboard key is a component to display which key or combination of keys performs a given action.

Storybook@nextui-org/kbdServer componentSourceStyles source
Zigma by NextUI (YC S24) - Connect your design files to production code in minutes | Product Hunt

We're live on Product Hunt! Join the conversation and help us get to #1 Product of the day 🚀


Installation

npx nextui-cli@latest add kbd
The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

Usage

Keys

Note: Check the API section to see all available keys.

Slots

  • base: Kbd wrapper, it handles alignment, placement, and general appearance.
  • abbr: The keys wrapper that handles the appearance of the keys.
  • content: The children wrapper that handles the appearance of the content.

Accessibility

  • Each command key has a title attribute that describes the action that the key performs.

API

Keyboard Key Props

AttributeTypeDescriptionDefault
childrenReactNodeThe content of the keyboard key.-
keysKbdKey | KbdKey[]The keys of the keyboard key.-
classNamesRecord<"base"|"abbr"|"content",string>Allows to set custom class names for the checkbox slots.-

Keyboard Keys

List of supported keys.

type KbdKey =
| "command"
| "shift"
| "ctrl"
| "option"
| "enter"
| "delete"
| "escape"
| "tab"
| "capslock"
| "up"
| "right"
| "down"
| "left"
| "pageup"
| "pagedown"
| "home"
| "end"
| "help"
| "space";