shadcn.io is not affiliated with official shadcn/ui
⌘⇧⌥⌃Ctrl+B
Installation
bunx --bun shadcn@latest add https://kit.dev/r/radix/kbd.jsonnpx shadcn@latest add https://kit.dev/r/radix/kbd.jsonpnpm dlx shadcn@latest add https://kit.dev/r/radix/kbd.jsonyarn shadcn@latest add https://kit.dev/r/radix/kbd.jsonCopy and paste the following code into your project.
import type React from "react";
import { cn } from "@/lib/utils";
export const Kbd = (props: React.ComponentProps<"kbd">) => {
const { className, ...rest } = props;
return (
<kbd
className={cn(
"cn-kbd pointer-events-none inline-flex select-none items-center justify-center",
className
)}
data-slot="kbd"
{...rest}
/>
);
};
Update the import paths to match your project setup.
Usage
import { Kbd, KbdGroup } from "@/components/ui/kbd";<div className="flex flex-col items-center gap-4">
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⌃</Kbd>
</KbdGroup>
<KbdGroup>
<Kbd>Ctrl</Kbd>
<span>+</span>
<Kbd>B</Kbd>
</KbdGroup>
</div>Demos
Group
Use the KbdGroup component to group keyboard keys together.
Button
Use the Kbd component inside a Button to display a keyboard key.
Tooltip
Use Kbd inside a Tooltip to show a keyboard shortcut.
Input Group
Use Kbd inside an InputGroupAddon to show a keyboard shortcut.
Rtl
Right-to-left kbd. See the RTL configuration guide for document direction.
API Reference
Kbd
PropType
AttributeType
KbdGroup
PropType
AttributeType