Kbd

kbdui

Boilerplate repo

Inline keyboard-key indicator — renders a single key or shortcut in monospace with a subtle bordered chip.

Also available for Vue ->

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/kbd.json

$npx shadcn@latest add https://uipkge.dev/r/react/kbd.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/kbd.json

$bunx shadcn@latest add https://uipkge.dev/r/react/kbd.json

Named registry:npx shadcn@latest add @uipkge-react/kbdInstalls to:components/ui/kbd/

Examples

Loading interactive previews…

Used by

data-explorer header header-search-command questionnaire shortcuts-dialog

[data-used-by-list] { max-height: none !important; overflow: visible !important; } [data-used-by-toggle] { display: none !important; }

Files installed (2)

components/ui/kbd/kbd.tsx0.5 kB

import * as React from 'react'
import { cn } from '@/lib/utils'

const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(({ className, ...props }, ref) => (
  <kbd
    ref={ref}
    data-uipkge=""
    data-slot="kbd"
    className={cn(
      'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded border px-1.5 font-mono text-xs font-medium select-none',
      className,
    )}
    {...props}
  />
))
Kbd.displayName = 'Kbd'

export { Kbd }