The Kbd component visually represents keyboard keys and shortcuts, making it easy to communicate keyboard interactions in documentation and interfaces.

Ctrl + C
import Kbd from "@radui/ui/Kbd";

const KbdExample = () => (
  <Kbd>Ctrl + C</Kbd>
)
  • Visual representation of keyboard keys and shortcuts
  • Pre-styled with appropriate borders and shadows
  • Customizable with size variants
  • Maintains semantic meaning with proper <kbd> HTML element
  • Ideal for documenting keyboard interactions and shortcuts

A component that visually represents keyboard buttons or key combinations, often used in documentation to indicate keyboard shortcuts or commands.

PropTypeDefault

children

ReactNode--

className

string''

customRootClass

string''

size

string''
Edit this page on GitHub