UIPackage
Vue React

Kbd

React data-display
Edit on GitHub

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

Installation

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

Or with the named registry: npx shadcn@latest add @uipkge-react/kbd

Examples

Live demo coming soon -- source below is exact.

Used by

command-palette

Files (2)

  • components/ui/kbd/kbd.tsx 0.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(
      'pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground',
      className,
    )}
    {...props}
  />
))
Kbd.displayName = 'Kbd'

export { Kbd }
  • components/ui/kbd/index.ts 0 kB 
    export { Kbd } from './kbd'

Raw manifest: https://react.uipkge.dev/r/react/kbd.json