# Kbd (Caseroom component)

A keyboard key or shortcut. Black and white, dark mode, shadcn-compatible; React, Astro and plain HTML.

## 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`
- HTML: https://www.themes.dev/caseroom/r/html/kbd.html (with https://www.themes.dev/caseroom/r/html/caseroom.css)

Page: https://www.themes.dev/caseroom/components/kbd/ · Rules for agents: https://www.themes.dev/caseroom/AGENT.md

## Code

### kbd.astro

```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.tsx

```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

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