Kbd
A visual representation of a keyboard shortcut.
Upstream documentationExamples
⌘K
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Kbd
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/kbd.json'Usage
A complete example using the installed component and hook paths.
Kbd usage
"use client";import { Kbd, KbdGroup } from "@/components/ui/kbd";const KeyboardPreview = function KeyboardPreview() { return ( <KbdGroup> <Kbd>⌘</Kbd> <Kbd>K</Kbd> </KbdGroup> ); };export default function Demo() { return <KeyboardPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Kbd
Kbd props
React.ComponentProps<"kbd">KbdGroup
KbdGroup props
React.ComponentProps<"div">