Kbd

Keyboard key and shortcut display.

import { CornerDownLeftIcon } from 'lucide-react'
import { Kbd } from '@/components/ui/kbd'

export function KbdDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Kbd />
      <Kbd>Shift</Kbd>
      <Kbd>Alt</Kbd>
      <Kbd>Esc</Kbd>
      <Kbd>Tab</Kbd>
      <Kbd>
        <CornerDownLeftIcon />
        <span className="sr-only">Enter</span>
      </Kbd>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://rdf.dev.360online.com/r/kbd.json

Installs to @/components/ui/kbd.

Manual installation

Copy the source into your project:

components/ui/kbd.tsx

import { cn } from '@/lib/utils'

function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
	return (
		<kbd
			data-slot="kbd"
			className={cn(
				"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-3",
				className,
			)}
			{...props}
		/>
	)
}

function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return <kbd data-slot="kbd-group" className={cn('inline-flex items-center gap-1', className)} {...props} />
}

export { Kbd, KbdGroup }

Displays textual user input from the keyboard, such as keyboard shortcuts. Use KbdGroup to combine several keys into one shortcut, and place keys in buttons, tooltips or input groups.

Features

Text or icon keys
KbdGroup for key combinations
Adapts its colours inside tooltips
Works in buttons and input groups

Usage

import { Kbd, KbdGroup } from '@/components/ui/kbd'

export function Shortcut() {
  return (
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  )
}

Examples

Default

Single keys, with text or an icon. Give icon keys an sr-only name.

import { CornerDownLeftIcon } from 'lucide-react'
import { Kbd } from '@/components/ui/kbd'

export function KbdDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Kbd />
      <Kbd>Shift</Kbd>
      <Kbd>Alt</Kbd>
      <Kbd>Esc</Kbd>
      <Kbd>Tab</Kbd>
      <Kbd>
        <CornerDownLeftIcon />
        <span className="sr-only">Enter</span>
      </Kbd>
    </div>
  )
}

Group

Key combinations inline in running text.

import { ArrowUpIcon, CommandIcon } from 'lucide-react'
import { Kbd, KbdGroup } from '@/components/ui/kbd'

export function KbdGroup() {
  return (
    <div className="flex flex-col items-center gap-4 text-sm text-muted-foreground">
      <p>
        Press{' '}
        <KbdGroup>
          <Kbd>Ctrl</Kbd>
          <span>+</span>
          <Kbd>B</Kbd>
        </KbdGroup>{' '}
        to open the case archive.
      </p>
      <p>
        Or{' '}
        <KbdGroup>
          <Kbd>
            <CommandIcon />
            <span className="sr-only">Command</span>
          </Kbd>
          <Kbd>
            <ArrowUpIcon />
            <span className="sr-only">Shift</span>
          </Kbd>
          <Kbd>P</Kbd>
        </KbdGroup>{' '}
        on a Mac to print the case file.
      </p>
    </div>
  )
}

Shortcut List

A keyboard shortcut reference for a case management view, laid out as a description list in a card.

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Kbd, KbdGroup } from '@/components/ui/kbd'

const shortcuts = [
  { action: 'Search cases', keys: ['Ctrl', 'K'] },
  { action: 'New case', keys: ['Ctrl', 'Alt', 'N'] },
  { action: 'Register document', keys: ['Ctrl', 'Shift', 'R'] },
  { action: 'Assign to me', keys: ['A'] },
  { action: 'Close panel', keys: ['Esc'] },
]

export function KbdShortcutList() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Keyboard shortcuts</CardTitle>
        <CardDescription>Case management · Press ? to show this list.</CardDescription>
      </CardHeader>
      <CardContent>
        <dl className="flex flex-col">
          {shortcuts.map((shortcut, index) => (
            <div key={shortcut.action}>
              {index > 0 && <Separator className="my-2" />}
              <div className="flex items-center justify-between gap-4">
                <dt className="text-sm">{shortcut.action}</dt>
                <dd>
                  <KbdGroup>
                    {shortcut.keys.map((key) => (
                      <Kbd key={key}>{key}</Kbd>
                    ))}
                  </KbdGroup>
                </dd>
              </div>
            </div>
          ))}
        </dl>
      </CardContent>
    </Card>
  )
}

In Button

Keys inside buttons, with aria-keyshortcuts on the button.

import { CornerDownLeftIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Kbd, KbdGroup } from '@/components/ui/kbd'

export function KbdInButton() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="outline" size="sm" aria-keyshortcuts="Escape">
        Cancel
        <Kbd>Esc</Kbd>
      </Button>
      <Button size="sm" aria-keyshortcuts="Control+Enter">
        Approve application
        <KbdGroup>
          <Kbd className="bg-primary-foreground/15 text-primary-foreground">Ctrl</Kbd>
          <Kbd className="bg-primary-foreground/15 text-primary-foreground">
            <CornerDownLeftIcon />
            <span className="sr-only">Enter</span>
          </Kbd>
        </KbdGroup>
      </Button>
    </div>
  )
}

Shortcut hints in tooltips on icon buttons. Keys adapt their colours inside tooltips.

import { ArrowDownIcon, ArrowUpIcon, SaveIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Kbd, KbdGroup } from '@/components/ui/kbd'

export function KbdInTooltip() {
  return (
    <TooltipProvider>
      <div className="flex items-center gap-2">
        <Tooltip>
          <TooltipTrigger
            render={<Button variant="outline" size="icon" aria-label="Save draft" aria-keyshortcuts="Control+S" />}
          >
            <SaveIcon />
          </TooltipTrigger>
          <TooltipContent>
            <div className="flex items-center gap-2">
              Save draft
              <KbdGroup>
                <Kbd>Ctrl</Kbd>
                <Kbd>S</Kbd>
              </KbdGroup>
            </div>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger render={<Button variant="outline" size="icon" aria-label="Previous case" aria-keyshortcuts="K" />}>
            <ArrowUpIcon />
          </TooltipTrigger>
          <TooltipContent>
            <div className="flex items-center gap-2">
              Previous case <Kbd>K</Kbd>
            </div>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger render={<Button variant="outline" size="icon" aria-label="Next case" aria-keyshortcuts="J" />}>
            <ArrowDownIcon />
          </TooltipTrigger>
          <TooltipContent>
            <div className="flex items-center gap-2">
              Next case <Kbd>J</Kbd>
            </div>
          </TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}

In Input Group

A search shortcut inside an input group.

import { SearchIcon } from 'lucide-react'
import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'
import { Kbd } from '@/components/ui/kbd'

export function KbdInInputGroup() {
  return (
    <div className="w-full max-w-sm">
      <InputGroup>
        <InputGroupInput aria-label="Search cases and documents" placeholder="Search cases and documents…" />
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <Kbd>Ctrl</Kbd>
          <Kbd>K</Kbd>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Accessibility

Rendered as a native kbd element
Give icon-only keys a text alternative (e.g. an sr-only span) when the icon carries meaning
Shortcuts shown visually should also be exposed via aria-keyshortcuts on the related control

Kbd