---
title: Kbd
description: "Displays a keyboard key or shortcut hint."
---

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

export default function KbdDemo() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>⇧</Kbd>
      <Kbd>P</Kbd>
    </KbdGroup>
  );
}
```

## Install

```bash
npx shadcn@latest add @madeui/kbd
```

## Usage

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

## Group

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

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

## In a tooltip

```tsx
import * as stylex from '@stylexjs/stylex';

import { Button } from '@/components/ui/button';
import { Kbd } from '@/components/ui/kbd';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { space } from '@/lib/constants.stylex';
import { colors } from '@/lib/tokens.stylex';

export default function KbdInTooltip() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button variant="outline" />}>
          Save
        </TooltipTrigger>
        <TooltipContent style={styles.content}>
          Save <Kbd style={styles.kbd}>⌘S</Kbd>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

const styles = stylex.create({
  content: {
    alignItems: 'center',
    display: 'flex',
    gap: space.s15,
  },
  kbd: {
    backgroundColor: `color-mix(in srgb, ${colors.background} 20%, transparent)`,
    color: colors.background,
  },
});
```

## In a button

```tsx
import { Button } from '@/components/ui/button';
import { Kbd, KbdGroup } from '@/components/ui/kbd';

export default function KbdInButton() {
  return (
    <Button variant="outline">
      Save
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>S</Kbd>
      </KbdGroup>
    </Button>
  );
}
```

## API reference

Plain `<kbd>` elements. `KbdGroup` lays out a key sequence with even gaps. Both accept native props plus a `style` prop (`StyleXStyles`, merged last).