Single keys
Combinations
Use Kbd to show keyboard keys and shortcuts inside your UI. A single key uses Kbd.Root; chord shortcuts are wrapped in Kbd.Group so multiple keys read as one unit (nested <kbd> is valid HTML for key combinations). Use Kbd for standalone keyboard hints in docs, toolbars, and footers. The default badge variant adds a subtle frame; naked is text-only. This component is not part of Base UI.
Here is the component implementation code that you can copy to your project:
// https://devie-ui.com/components/kbd
import clsx from "clsx";
import type React from "react";
import styles from "./Kbd.module.scss";
function Root({ className, variant = "badge", ...props }: Kbd.Root.Props) {
return (
<kbd
className={clsx(
styles.root,
variant === "naked" ? styles.naked : styles.badge,
className,
)}
{...props}
/>
);
}
function Group({ className, ...props }: Kbd.Group.Props) {
return <kbd className={clsx(styles.group, className)} {...props} />;
}
const Kbd = {
Root,
Group,
};
namespace Kbd {
export namespace Root {
export type Variant = "badge" | "naked";
export interface Props extends React.HTMLAttributes<HTMLElement> {
className?: string;
variant?: Variant;
}
}
export namespace Group {
export interface Props extends React.HTMLAttributes<HTMLElement> {
className?: string;
}
}
}
export default Kbd;One glyph or label per Kbd.Root, including symbols like ⌘ and word keys such as Shift.
variant="badge" (default) adds a subtle frame suited to docs and toolbars. variant="naked" is text-only—better in dense lists and menus.
Wrap several Kbd.Root elements in Kbd.Group for shortcuts that are pressed together.