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

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

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";