shadcn.io is not affiliated with official shadcn/ui

Shadcn Kbd for React

Styled representation of a single key.

PreviewCode

⌘⇧⌥⌃Ctrl+B

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/kbd.json

npx shadcn@latest add https://kit.dev/r/base/kbd.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/kbd.json

yarn shadcn@latest add https://kit.dev/r/base/kbd.json

Copy and paste the following code into your project.

components/ui/kbd.tsx

import type React from "react";
import { cn } from "@/lib/utils";

export const Kbd = (props: React.ComponentProps<"kbd">) => {
  const { className, ...rest } = props;

  return (
    <kbd
      className={cn(
        "cn-kbd pointer-events-none inline-flex select-none items-center justify-center",
        className
      )}
      data-slot="kbd"
      {...rest}
    />
  );
};

Update the import paths to match your project setup.

Usage

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

<div className="flex flex-col items-center gap-4">
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>⇧</Kbd>
    <Kbd>⌥</Kbd>
    <Kbd>⌃</Kbd>
  </KbdGroup>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <span>+</span>
    <Kbd>B</Kbd>
  </KbdGroup>
</div>

Demos

Group

Use the KbdGroup component to group keyboard keys together.

PreviewCode

Button

Use the Kbd component inside a Button to display a keyboard key.

PreviewCode

Use Kbd inside a Tooltip to show a keyboard shortcut.

PreviewCode

Input Group

Use Kbd inside an InputGroupAddon to show a keyboard shortcut.

PreviewCode

Rtl

Right-to-left kbd. See the RTL configuration guide for document direction.

PreviewCode

API Reference

Kbd

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"kbd"

KbdGroup

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"kbd-group"