Kbd

Installation#

1. Install the dependencies

   npm install cn

2. Copy the source into your project

   components/ui/kbd.tsx

   import { cn } from "cn"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 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_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 }

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

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

Examples#