Kbd

Keyboard shortcuts and keys.

KEnterCtrlShift

Shortcuts

CtrlKJAltShiftDel

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/kbd.json"

Usage

import { Kbd, KbdGroup } from "@/components/ui/kbd"
 
export function MyComponent() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  )
}

Examples

Enter Key

EnterReturn ShiftEnter

API Reference

The Kbd component accepts standard HTML kbd attributes. It provides an inset shadow effect to mimic a physical key.

Prop	Type	Default	Description
`className`	`string`	-	CSS classes to override default keycap styling.

Input Label

On This Page

Installation Usage Examples Enter Key API Reference