# V kbd 6

> Reference list

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-kbd-6).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-kbd-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-kbd-6-light-851d2ce121bd0c60.png
- Registry item: https://ui.cnippet.dev/r/v-kbd-6.json
- Categories: kbd
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-kbd-6.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/kbd`

## Files

### `registry/default/variants/v-kbd-6.tsx`

```tsx
import { Kbd, KbdGroup } from "@/registry/default/ui/kbd";
import { Separator } from "@/registry/default/ui/separator";

const shortcuts = [
  { keys: ["⌘", "K"], label: "Search" },
  { keys: ["⌘", "N"], label: "New File" },
  { keys: ["⌘", "S"], label: "Save" },
  { keys: ["⌘", "Z"], label: "Undo" },
  { keys: ["⌘", "⇧", "Z"], label: "Redo" },
];

export function Pattern() {
  return (
    <div className="mx-auto flex flex-col">
      <p className="mb-3 font-medium text-sm">Keyboard Shortcuts</p>
      <Separator />
      <div className="flex flex-col">
        {shortcuts.map((shortcut) => (
          <div
            className="flex items-center justify-between border-b py-2.5 last:border-b-0"
            key={shortcut.label}
          >
            <span className="text-muted-foreground text-sm">
              {shortcut.label}
            </span>
            <KbdGroup>
              {shortcut.keys.map((key) => (
                <Kbd key={key}>{key}</Kbd>
              ))}
            </KbdGroup>
          </div>
        ))}
      </div>
    </div>
  );
}
```