---
title: Kbd
description: Compact labels for keys and keyboard shortcuts.
group: Components
order: 43
---

Show keys and shortcuts on their own, in groups, inside buttons, or in tooltips.

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

export function Example() {
  return (
    <div className="flex flex-col items-center gap-4">
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>⇧</Kbd>
        <Kbd>⌥</Kbd>
        <Kbd>⌃</Kbd>
      </KbdGroup>
      <Kbd>Ctrl+B</Kbd>
    </div>
  )
}
```

## Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add kbd
```

## Usage

```tsx
import { Kbd } from "@/components/ui/kbd"
```

```tsx
<Kbd>Ctrl</Kbd>
```

## Composition

```tree
Kbd
KbdGroup
├── Kbd
└── Kbd
```

## Group

Use `KbdGroup` to keep related keys on one row.

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

export function Example() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-1 text-sm tracking-wide text-muted-foreground">
      <span>Use</span>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>B</Kbd>
      </KbdGroup>
      <span>/</span>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
      <span>to open the command palette</span>
    </div>
  )
}
```

## Button

Place `Kbd` inside a `Button` for an inline shortcut hint.

```tsx
import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"

export function Example() {
  return (
    <Button variant="outline">
      Accept <Kbd>⏎</Kbd>
    </Button>
  )
}
```

## Tooltip

Place `Kbd` in `TooltipContent` to reveal a shortcut on hover.

```tsx
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd, KbdGroup } from "@/components/ui/kbd"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export function Example() {
  return (
    <TooltipProvider>
      <ButtonGroup>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline">Save</Button>
          </TooltipTrigger>
          <TooltipContent className="flex items-center gap-2">
            Save
            <KbdGroup>
              <Kbd>⌘</Kbd>
              <Kbd>S</Kbd>
            </KbdGroup>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline">Print</Button>
          </TooltipTrigger>
          <TooltipContent className="flex items-center gap-2">
            Print
            <Kbd>⌘P</Kbd>
          </TooltipContent>
        </Tooltip>
      </ButtonGroup>
    </TooltipProvider>
  )
}
```

## API Reference

### Kbd

Native `<kbd>` for a single key or short shortcut. All `kbd` HTML attributes are supported. Styles invert automatically inside `TooltipContent`.

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |

```tsx
<Kbd>Ctrl</Kbd>
```

### KbdGroup

Groups `Kbd` keys in a row. Accepts native `kbd` props.

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |

```tsx
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>
```

## Source

```tsx
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

function Kbd({ className, ...props }: ComponentProps<"kbd">) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium tracking-wide text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
        className,
      )}
      {...props}
    />
  );
}

function KbdGroup({ className, ...props }: ComponentProps<"kbd">) {
  return (
    <kbd
      data-slot="kbd-group"
      className={cn("inline-flex items-center gap-1", className)}
      {...props}
    />
  );
}

export { Kbd, KbdGroup };
```