Component

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

preview
Ctrl + C
React
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 →