Kbd

A key or a shortcut, shown the way it appears on the keyboard.

⌘KShift↵Esc⌘K

Create issue: C
Search: ⌘K
Toggle sidebar: ⌘B
Send comment: ⌘↵

Fig. 1 Shortcuts shown as keys, alone and in combinations.

When to use it

Use Kbd to show keyboard shortcuts in menus, tooltips, and help text. Group combinations with KbdGroup so they read as one shortcut.

Write the keys for the platform people are on: ⌘ on a Mac, Ctrl elsewhere.

How it behaves

Kbd renders a native kbd element. Wrap a combination in KbdGroup, one Kbd per key, so screen readers and copy keep the keys together.

The default variant draws a small keycap on the control fill. variant="plain" shows the key as muted text for menus, settings rows, and lists with many shortcuts.

Inside TooltipContent, both variants switch to the tooltip's inverted colors automatically.

Use the platform's symbols where they are familiar (⌘, ⇧, ↵), and offer Ctrl equivalents in your own copy when shortcuts differ by platform.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

kbd-example.tsx

The full source is yours to edit once installed:

kbd.tsx

1import { cn } from "@/registry/lib/utils"2import { cva, type VariantProps } from "class-variance-authority"3import type * as React from "react"4 5// default draws a keycap on the control fill; plain shows the key as text for dense rows and menus.6// Inside a Tooltip both follow its inverted colors.7const kbdVariants = cva(8  "pointer-events-none inline-flex h-5 w-fit items-center justify-center gap-1 rounded-sm font-sans label-sm text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-3",9  {10    variants: {11      variant: {12        default:13          "min-w-5 bg-control px-1 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10",14        plain: "min-w-0 in-data-[slot=tooltip-content]:text-background/70"15      }16    },17    defaultVariants: {18      variant: "default"19    }20  }21)22 23function Kbd({24  className,25  variant = "default",26  ...props27}: React.ComponentProps<"kbd"> & VariantProps<typeof kbdVariants>) {28  return (29    <kbd30      data-slot="kbd"31      data-variant={variant}32      className={cn(kbdVariants({ variant }), className)}33      {...props}34    />35  )36}37 38function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {39  return (40    <kbd41      data-slot="kbd-group"42      className={cn("inline-flex items-center gap-1 has-data-[variant=plain]:gap-0.5", className)}43      {...props}44    />45  )46}47 48export { Kbd, KbdGroup }49