# Kbd
URL: /design/components/kbd

Keyboard keys as printed caps, for shortcuts and hints.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

\[interactive preview component KbdSpecimen omitted]

Code for KbdSpecimen preview:

```tsx
"use client";

import { useState, type ReactNode } from "react";
import { Kbd, KbdGroup } from "@/components/ui/kbd";

function KbdSpecimen(): ReactNode {
  return (
    <span className="text-muted-foreground flex items-center gap-2 text-sm">
      Search
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
    </span>
    <span className="text-muted-foreground flex items-center gap-2 text-sm">
      Ask AI
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>I</Kbd>
      </KbdGroup>
    </span>
    <span className="text-muted-foreground flex items-center gap-2 text-sm">
      Send
      <Kbd>⏎</Kbd>
    </span>
  );
}
```

## Installation

Copy the source into `components/ui/kbd.tsx`. Registry items that depend on it install it automatically.

- code

  import { cn } from "@/lib/utils"; function Kbd({ className, ...props }: React.ComponentProps<"kbd">) { return ( \<kbd data-slot="kbd" className={cn( "text-muted-foreground border-border/60 bg-muted/50 pointer-events-none inline-flex h-4 w-fit min-w-4 items-center justify-center rounded-\[3px] border px-1 font-mono text-\[10px] select-none", "\[&\_svg:not(\[class\*='size-'])]:size-3", "\[\[data-slot=tooltip-content]\_&]:bg-background/20 \[\[data-slot=tooltip-content]\_&]:text-background dark:\[\[data-slot=tooltip-content]\_&]:bg-background/10", className, )} {...props} /> ); } function KbdGroup({ className, ...props }: React.ComponentProps<"div">) { return ( \<kbd data-slot="kbd-group" className={cn("inline-flex items-center gap-0.5", className)} {...props} /> ); } export { Kbd, KbdGroup };

* title

  components/ui/kbd.tsx

* copyText

  import { cn } from "@/lib/utils"; function Kbd({ className, ...props }: React.ComponentProps<"kbd">) { return ( \<kbd data-slot="kbd" className={cn( "text-muted-foreground border-border/60 bg-muted/50 pointer-events-none inline-flex h-4 w-fit min-w-4 items-center justify-center rounded-\[3px] border px-1 font-mono text-\[10px] select-none", "\[&\_svg:not(\[class\*='size-'])]:size-3", "\[\[data-slot=tooltip-content]\_&]:bg-background/20 \[\[data-slot=tooltip-content]\_&]:text-background dark:\[\[data-slot=tooltip-content]\_&]:bg-background/10", className, )} {...props} /> ); } function KbdGroup({ className, ...props }: React.ComponentProps<"div">) { return ( \<kbd data-slot="kbd-group" className={cn("inline-flex items-center gap-0.5", className)} {...props} /> ); } export { Kbd, KbdGroup };

* viewportClassName

  max-h-\[450px]

- language

  tsx

- code

  import { cn } from "@/lib/utils"; function Kbd({ className, ...props }: React.ComponentProps<"kbd">) { return ( \<kbd data-slot="kbd" className={cn( "text-muted-foreground border-border/60 bg-muted/50 pointer-events-none inline-flex h-4 w-fit min-w-4 items-center justify-center rounded-\[3px] border px-1 font-mono text-\[10px] select-none", "\[&\_svg:not(\[class\*='size-'])]:size-3", "\[\[data-slot=tooltip-content]\_&]:bg-background/20 \[\[data-slot=tooltip-content]\_&]:text-background dark:\[\[data-slot=tooltip-content]\_&]:bg-background/10", className, )} {...props} /> ); } function KbdGroup({ className, ...props }: React.ComponentProps<"div">) { return ( \<kbd data-slot="kbd-group" className={cn("inline-flex items-center gap-0.5", className)} {...props} /> ); } export { Kbd, KbdGroup };

## Usage

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

export function Example() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  );
}
```

## API Reference

### Kbd

Renders a native `kbd` element and accepts its props.

- `className?`: `string` — Additional CSS classes.

### KbdGroup

Lays out a chord of keys with even spacing.

- `className?`: `string` — Additional CSS classes.