Kbd

A styled keyboard key or shortcut hint.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/kbd.json

Usage

tsx

import { Kbd } from "@/components/hangry-ui/components/kbd";

<Kbd>Ctrl K</Kbd>

Props

Prop	Type	Default	Description
`label`	`string`	`"⌘ K"`	Keyboard key or shortcut text.
`children`	`ReactNode`	`—`	Custom content that replaces label.
`className`	`string`	`""`	Additional CSS classes on the component root.
`Native props`	`ComponentProps<"kbd">`	`—`	Forwards native kbd attributes, aria-* attributes, and event handlers.

Setup notes

Use Tailwind CSS v4. Borders use the global border-border token. No rounded classes or additional packages are required. Customize content with props and styling with className.