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/caseroom/r/kbd.json
Astro: npx shadcn@latest add https://www.themes.dev/caseroom/r/astro/kbd.json

Or copy the files below into your project. They need clsx, tailwind-merge, and the Caseroom 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';

kbd.astro

---
import type { HTMLAttributes } from 'astro/types';
import { cn } from '@/lib/utils';
import { kbdClasses } from './kbd.variants';

type Props = HTMLAttributes<'kbd'>;
const { class: className, ...rest } = Astro.props;
---

<kbd class={cn(kbdClasses, className)} {...rest}><slot /></kbd>

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';

kbd.html

<div class="grid w-full max-w-xs gap-4 text-sm">
  <p class="flex items-center gap-1.5 text-muted-foreground">
    Search with
    <kbd class="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">
      ⌘
    </kbd>
    <kbd class="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">
      K
    </kbd>
    or
    <kbd class="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">
      /
    </kbd>
  </p>
  <dl class="grid gap-2.5 rounded-lg border p-3">
    <div class="flex items-center justify-between gap-3">
      <dt>Command menu</dt>
      <dd class="flex items-center gap-1">
        <kbd class="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">
          ⌘
        </kbd>
        <kbd class="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">
          K
        </kbd>
      </dd>
    </div>
    <div class="flex items-center justify-between gap-3">
      <dt>New project</dt>
      <dd class="flex items-center gap-1">
        <kbd class="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">
          N
        </kbd>
      </dd>
    </div>
    <div class="flex items-center justify-between gap-3">
      <dt>Go to deploys</dt>
      <dd class="flex items-center gap-1">
        <kbd class="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">
          G
        </kbd>
        <span class="text-muted-foreground">then</span>
        <kbd class="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">
          D
        </kbd>
      </dd>
    </div>
  </dl>
</div>