Question 1

What is a Kbd?

Accepted Answer

Kbd draws a key cap for a keyboard key, and KbdGroup holds the keys of one shortcut together, like ⌘K. Each example here is shadcn.io's Kbd, which renders a real `kbd` element styled with Tailwind CSS, for React on Base UI, React Aria, Ark UI and Radix UI, and for Vue, Svelte and Solid on Ark UI.

Question 2

Are these Kbd examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution. Seeing the code and installing it takes a free shadcn.io account.

Question 3

Why use Kbd instead of plain text?

Accepted Answer

A key cap is recognized as a key at a glance, where Ctrl+K in plain text is read as words. The `kbd` element also tells browsers and assistive technology that the text is keyboard input, and the cap keeps the same look in menus, tooltips, buttons and docs.

Question 4

Where should I show keyboard shortcuts?

Accepted Answer

Next to the commands that have shortcuts: menu items, tooltips, the search field that opens a command palette, a shortcuts page. Show them where people will use them; a list nobody opens teaches nothing.

Question 5

Should I use ⌘ symbols or words like Ctrl?

Accepted Answer

Mac users expect symbols, ⌘ ⌥ ⌃ ⇧, as macOS menus show them; Windows and Linux users expect words, Ctrl, Alt and Shift. The Platform-Aware Shortcut example switches between ⌘ and Ctrl for the user's device.

Question 6

How do I show a key sequence?

Accepted Answer

Put the keys pressed together in one KbdGroup, and show steps pressed one after another as separate caps or groups with then or an arrow between them, as the sequence examples do. The extra space keeps a sequence from reading as one chord.

Question 7

How do I make key caps bigger or smaller?

Accepted Answer

Kbd has no size prop: its classes make it about as tall as a line of small text, and you change the size with classes on each cap, such as `h-8 min-w-8 text-base` for a large one. Keep the height and minimum width equal so single characters stay square.

Question 8

How do I install a Kbd example?

Accepted Answer

Sign in with a free account, open the example and run the install command it shows. It adds the example and the Kbd component to your project, for your framework and UI library.

Question 9

How do I show ⌘ on Mac and Ctrl elsewhere?

Accepted Answer

Test `navigator.userAgent` for Mac, iPhone or iPad after the component mounts, and show ⌘ when it matches and Ctrl otherwise. Rendering Ctrl first keeps a server render and the first client render the same, as the Platform-Aware Shortcut example does.

Question 10

Does Kbd make the shortcut work?

Accepted Answer

No. Kbd only draws the key: it doesn't listen for presses and ignores the pointer. Add a `keydown` listener for the shortcut yourself, and put a click action on a Button that shows the Kbd inside it.

Question 11

Which libraries do Kbd examples use?

Accepted Answer

shadcn.io's Kbd (for React on Base UI, React Aria, Ark UI or Radix UI, and on Ark UI in Vue, Svelte and Solid), Tailwind CSS, and Lucide icons in the examples with icons.

Question 12

Are the Kbd examples accessible?

Accepted Answer

The keys are real text in `kbd` elements, so screen readers read them. Symbols like ⌘ or → aren't read the same way by every screen reader, so the icon examples hide the icon and add the key's name as visually hidden text; do the same wherever a shortcut matters.

Question 13

Do the examples work with server rendering?

Accepted Answer

Yes. All but one are static markup that renders the same on the server and the client in every framework. The Platform-Aware Shortcut example reads the browser's user agent, so it updates its label once it has mounted.

Kbd Examples

Arrow Keys Cross Pattern

Arrow Keys Horizontal

Vim Navigation Keys

WASD Gaming Keys

Editing Keys

F1 Help Key

F12 DevTools Key

Function Keys Row

Modifier Keys

Special Keys

Mac Command Symbol

Mac Control Symbol

More component examples

Table

Avatar

Badge

Carousel

Chart

Data Table

Item

Label

Kbd examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every kbd example. One prompt away.