Kbd

Copy Markdown

Styled representation of a single key.

PreviewCode

K⌘⌃⇧

⌘+K

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/kbd

Kbd

KbdGroup
├── Kbd
└── Kbd

import { 
  Kbd, 
  KbdGroup 
} from "@/components/ui";

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

PreviewCode

K⌘⌃

Use KbdGroup to group keys into a single shortcut.

PreviewCode

Use Ctrl+K to open the command palette

Use Kbd inside InputGroup addons to show shortcut hints next to inputs.

PreviewCode

⌘K

Add shortcut hints to buttons with Kbd or KbdGroup.

PreviewCode

Save Ctrl+S

Show keyboard shortcuts in Tooltip content.

PreviewCode

Dark mode

Styled representation of a single key.

Groups multiple keys into one shortcut.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	`false`

[

Item ](/docs/components/item)[

Link Overlay ](/docs/components/link-overlay)

On This Page