Kbd (Keyboard)

A specialized typography component used to display keyboard buttons, shortcuts, and commands.

Displaying keyboard shortcuts to power users is a critical part of modern web design (especially in tools like Command Menus). The KbdBlock uses a native <kbd> HTML element for strict semantic accuracy, and applies a precise combination of borders, background colors, and inset shadows to simulate a physical, tactile keyboard key.

Explore the different variations of the Kbd component — each example shows a live preview with the exact code to copy.

Kbd

A single key, rendered as a semantic <kbd> element.

children: is the key glyph — the component adds no label text of its own.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Kbd

npx shadcn@latest add @algorize-ui/kbd

components/custom/blocks/KbdBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Kbd needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Combinations

children: holds one key each — sequence several Kbd elements side by side to spell out a shortcut.

Inline in text

size"sm": keeps keys on the text baseline so they read naturally inside prose.

Usage

You can use the component independently, or string multiple together to represent complex key combinations.

Features

Learn about the Kbd component's typography styles for displaying keyboard shortcuts and command instructions consistently.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	Controls the height, padding, and font-size of the key element.
`className`	`string`	`undefined`	Standard Tailwind CSS overrides. Useful for adding specific margin or overriding the shadow if needed.
`...props`	`HTMLAttributes<HTMLElement>`		Accepts all standard HTML attributes for a native `<kbd>` element, including `title` or `aria-label` for accessibility.