Shadcn Kbd

Browse 6 production-ready shadcn kbd components for displaying keyboard shortcuts, command hints, and hotkey references. Shadcn Kbd is compatible with Radix UI and Base UI components and is fully aligned with Shadcn Create style options so your previews match your design tokens.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Shortcut hints set beside an action name, in a tooltip or inside a search field
Single keys and key combinations, as loose caps, a group of caps or keys with an icon
Reference lists that pair each command name with its key chord

When not to use

A searchable palette of actions the user picks from with the keyboard: use the Command component
A ready made shortcuts panel with search and sections, sliding in from the side: use the Sheet blocks
A status, tag or count shown as a small chip, not a key to press: use the Badge component

Agent notes

No example listens for its keys: Kbd only draws the label, so bind each shortcut with your own keydown handler
Kbd turns off pointer events and text selection, so it cannot be clicked, used as a hover trigger or selected

Markdownhttps://web.dev.reui.io/components/kbd.md

MCPget_component("kbd")

Installnpx shadcn@latest add kbd

Full index for agents:llms.txtReUI MCP setup

Shadcn Kbd: Keyboard Shortcuts and Commands

Shadcn Kbd is a semantic component for displaying keyboard keys and key combinations. It maps to HTML kbd semantics while providing Tailwind styling and Radix compatibility, and aligns with Shadcn Create style options.

It renders keyboard shortcuts, command hints, and hotkey references in a consistent, recognizable style so users discover keyboard navigation without tooltips.

ReUI lists kbd components in help sections, command palettes, and documentation so you evaluate spacing, grouping, and context next to a Shadcn Button or Shadcn Tooltip. The sections below cover what it is, why teams use it, and integration components.

What is Shadcn Kbd?

In UI terms, a kbd is a semantic element that renders keyboard key or key combination. Shadcn Kbd wraps the HTML kbd element with Tailwind styling so shortcuts look polished and recognizable.

Components here show single keys (Enter, Esc), modifier combinations (Cmd+K, Ctrl+Shift+P), and groups of related shortcuts. They help you decide key styling, spacing, and placement before documenting commands in help, settings, or command palettes.

Why Use Shadcn Kbd?

Kbds teach users about keyboard shortcuts without interrupting their flow. A quick visual reference (Cmd+K) is clearer than prose ("press Command and K together"). Teams use them in help sections, tooltips, and in-app command hints to make power-user features discoverable.

The layouts on this page combine kbd elements with Shadcn Button hints, Shadcn Tooltip, and Shadcn Command palettes.

Shadcn Kbd Features

Semantic HTML. Uses the HTML kbd element so search engines and assistive tech recognize it as keyboard input.
Single and Combined Keys. Display single keys (Enter) or combinations (Cmd+K) with proper spacing and separators.
KbdGroup for Organization. Group related shortcuts together so documentation stays scannable and organized.
Tailwind Styling. Background, border, and typography respect Shadcn Create tokens so keys match your design system.
Integration with Buttons and Tooltips. Pair with Shadcn Button titles or Shadcn Tooltip content to hint at available shortcuts.

Add kbd elements inside Shadcn Button title attributes to hint at keyboard shortcuts. Use Shadcn Tooltip to display fuller shortcut hints on hover or focus.

Display kbd groups in a Shadcn Card help section or inside a Shadcn Dialog for a dedicated shortcuts reference. Pair with prose and Shadcn Accordion to organize shortcuts by category.

Use kbd in a Shadcn Command palette to show available shortcuts. Combine with Shadcn Input search to filter commands and links to actions.

Frequently Asked Questions

Should I use the semantic kbd element or just style text visually?

Always use kbd for semantic value. Screen readers can understand they are keyboard controls, search engines can index them properly, and your design system can style them consistently. Plain text feels inconsistent.

How do I display Mac (Cmd) and Windows (Ctrl) shortcuts together?

Check the user's platform (navigator.platform or useEffect) and render the appropriate key (Cmd vs Ctrl). Some apps show both with a slash (Cmd/Ctrl+K) for clarity, though this can feel cluttered. A single platform-appropriate version is usually better.

What is the best placement for keyboard shortcut hints on a button?

Display shortcuts in button title attributes or a Shadcn Tooltip on hover. This pairs the visual action with its keyboard equivalent without cluttering the button label. Command palettes and help documentation can show comprehensive lists.

Can I render a kbd inside a tooltip or button?

Yes. Render kbd inside a Shadcn Button title attribute or a Shadcn Tooltip to show the shortcut hint. This visually pairs the action with its keyboard equivalent and teaches users shortcuts through exploration.

Is the Shadcn Kbd component accessible for all users?

Yes. The semantic kbd element tells assistive tech it's a keyboard control. You still need to verify that the keyboard shortcut actually works (wired correctly in your app) and that documentation is clear. Avoid relying on kbd alone without prose context.

How do ReUI kbd components differ from a minimal single-key example?

ReUI shows kbd in command palettes, help sections, and button tooltips. You see grouping, platform variants, and integration with Shadcn Button and Shadcn Tooltip together, which is closer to production documentation.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.