Kbd

A component that visually represents keyboard keys, used for shortcuts or instructions in documentation and tutorials.

Usage

Basic usage example to quickly see how the Kbd works.

⌘/Ctrl+Shift+M

import { Kbd } from "@/ui/kbd";

export function KbdDemo() {
  return (
    <Kbd
      size="sm"
      variant="primitive"
      items={["⌘", "Ctrl", "Shift", "M"]}
      separator={index => (index === 0 ? "/" : "+")}
    />
  );
}

Properties

Interactive configurator to explore customization options for the Kbd component.

⌘ + Shift + M

⌘+Ctrl+Shift+M

Separator

Size

Variant

API References

Styles API

Styles API	Type	Default	Annotation
unstyled`?`	`boolean`	`false`	if `true`, all default styles will be removed

Props API

Props API	Type	Default	Annotation
-`?`	-	`~`	--

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

kbd.tsx

Kbd