Important: We now recommend using the official shadcn/ui + Base UI setup for new projects.Learn more
basecn
Components

Kbd

Used to display textual user input from keyboard.

Ctrl+B

Installation

pnpm dlx shadcn@latest add https://basecn.dev/r/kbd.json
or

If you are using a namespaced registry, you can use the following command:

pnpm dlx shadcn@latest add @basecn/kbd

Examples

Group

Use the KbdGroup component to group keyboard keys together.

Use Ctrl + BCtrl + K to open the command palette

Button

Use the Kbd component inside a Button component to display a keyboard key inside a button.

Tooltip

You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.

Input Group

You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.

K

On this page