Kbd.

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

export default function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-4 text-sm text-muted-foreground">
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
      <p>
        Hold <Kbd>Ctrl</Kbd> + <Kbd>T</Kbd> to terminate a program on the computer.
      </p>
      <p>
        Press <Kbd>Esc</Kbd> to close the terminal.
      </p>
    </div>
  );
}

Installation#

With the CLI

$npx lanterncn add kbd

This also installs the Lantern theme and any Lantern UI components it depends on. The shadcn CLI works directly too: npx shadcn@latest add httptim/lantern-ui/kbd. See Installation if your project is not set up yet.

Manually

1. Copy the source into your project

   components/ui/kbd.tsx

   import * as React from "react";
   
   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 min-w-5 w-fit items-center justify-center gap-1 rounded-sm border border-input border-b-2 bg-secondary px-1 font-mono text-[10px] font-medium text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-3",
           className,
         )}
         {...props}
       />
     );
   }
   
   function KbdGroup({ className, ...props }: React.ComponentProps<"kbd">) {
     return <kbd data-slot="kbd-group" className={cn("inline-flex items-center gap-1", className)} {...props} />;
   }
   
   export { Kbd, KbdGroup };

2. Update the import paths to match your project

   The source imports cn from @/lib/utils.

Usage#

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

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>