Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Kbd examples · Sizes

Large Kbd for React

Large ⌘ and K key caps, 32 pixels tall with base-size text.

Framework
UI library

When the shortcut is the point, as in a feature highlight, an onboarding step or a tutorial, a default-size cap is too easy to miss. This React example sizes both keys of a ⌘K KbdGroup with h-8 min-w-8 px-2 text-base: 32 pixels tall, at least as wide, with body-size type.

Preview

Preview width
⌘K

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

When should I use large key caps?

When the shortcut is the content rather than a hint beside it: a callout that teaches a shortcut, an onboarding screen, a cheat sheet, a slide. Next to a menu item or a button, the default size fits better.

What dimensions work for large key caps?

This example uses a 32-pixel height and minimum width with base-size text and a little more padding. Keep the height and minimum width equal so single characters stay square, and scale the text with them.

How do I use large key caps for visual hierarchy?

Use one large shortcut as the focal point and keep the rest of the page's shortcuts at the default size. Several large shortcuts compete with each other and the headings.

Are large key caps more accessible?

They're easier to read for people with low vision and from a distance. They don't change what screen readers hear, which is the text inside each cap.

Should I use large key caps on mobile?

Phones rarely have a hardware keyboard, so shortcut hints matter less there. If you show them, large caps take a lot of width; consider hiding shortcut hints on small screens instead.

Do large key caps work better in screenshots and videos?

Yes. Screenshots get scaled down and videos compressed, and a 32-pixel cap survives both better than a default one.

All 39 kbd examples