Skip to content
themes.dev
    Style: Wireframe

    Components

    56 free

    Style

    Components · Display

    Kbd

    A keyboard key or shortcut.

    Search with ⌘K or /

    Command menu
    ⌘K
    New project
    N
    Go to deploys
    GthenD

    Both previews render the same markup; the HTML tab below is that markup without a framework.

    Install

    React
    npx shadcn@latest add https://www.themes.dev/ui/r/kbd.json
    Astro
    npx shadcn@latest add https://www.themes.dev/ui/r/astro/kbd.json

    Or copy the files below into your project. They need clsx, tailwind-merge, and the themes.dev UI theme. The HTML needs only the compiled CSS.

    kbd.tsx
    import type { HTMLAttributes } from 'react';
import { cn } from '@/lib/utils';
import { kbdClasses } from './kbd.variants';

export function Kbd({ className, ...props }: HTMLAttributes<HTMLElement>) {
  return <kbd className={cn(kbdClasses, className)} {...props} />;
}
    kbd.variants.ts
    export const kbdClasses =
  'inline-flex h-5 min-w-5 items-center justify-center rounded-[4px] border border-b-2 bg-muted px-1 font-mono text-[11px] font-medium text-muted-foreground';