Kbd

Preview

⌘

import { Kbd, KbdGroup } from "@/components/ui/Kbd";
import { ArrowUpIcon, ArrowDownIcon } from "@radix-ui/react-icons";

export function KbdDemo() {
  return <Kbd>⌘</Kbd>;
}

Installation

Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces

pnpm dlx shadcn@latest add @aura/kbd

Manual

Copy and paste the class names utility into your utils/class-names.ts file.

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Kbd component into your components/ui/Kbd.tsx file.

import type * as React from "react";

import { cn } from "@/utils/class-names";

function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      className={cn(
        "pointer-events-none inline-flex h-1.5 min-w-2 select-none items-center justify-center gap-0.5 rounded bg-gray-2 px-0.5 font-medium font-sans text-gray-11 text-xs [&_svg:not([class*='size-'])]:size-1 border border-gray-a6",
        className,
      )}
      data-slot="kbd"
      {...props}
    />
  );
}

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

export { Kbd, KbdGroup };

Usage

SingleKey

export const SingleKey = () => (
  <div className="flex gap-2 items-center">
    <Kbd>A</Kbd>
    <Kbd>B</Kbd>
    <Kbd>C</Kbd>
    <Kbd>Enter</Kbd>
    <Kbd>Esc</Kbd>
  </div>
)

ModifierKeys

export const ModifierKeys = () => (
  <div className="flex gap-2 items-center">
    <Kbd>⌘</Kbd>
    <Kbd>⌥</Kbd>
    <Kbd>⌃</Kbd>
    <Kbd>⇧</Kbd>
  </div>
)

KeyboardShortcuts

export const KeyboardShortcuts = () => (
  <div className="flex flex-col gap-4">
    <div className="flex items-center gap-2">
      <span>Copy:</span>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>C</Kbd>
      </KbdGroup>
    </div>
    <div className="flex items-center gap-2">
      <span>Paste:</span>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>V</Kbd>
      </KbdGroup>
    </div>
    <div className="flex items-center gap-2">
      <span>Save:</span>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>S</Kbd>
      </KbdGroup>
    </div>
    <div className="flex items-center gap-2">
      <span>Undo:</span>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>Z</Kbd>
      </KbdGroup>
    </div>
  </div>
)

WithIcons

export const WithIcons = () => (
  <div className="flex flex-col gap-4">
    <div className="flex items-center gap-2">
      <span>Navigate up:</span>
      <Kbd>
        <ArrowUpIcon />
      </Kbd>
    </div>
    <div className="flex items-center gap-2">
      <span>Navigate down:</span>
      <Kbd>
        <ArrowDownIcon />
      </Kbd>
    </div>
    <div className="flex items-center gap-2">
      <span>Navigate:</span>
      <KbdGroup>
        <Kbd>
          <ArrowUpIcon />
        </Kbd>
        <Kbd>
          <ArrowDownIcon />
        </Kbd>
      </KbdGroup>
    </div>
  </div>
)

ComplexShortcuts

export const ComplexShortcuts = () => (
  <div className="flex flex-col gap-4">
    <div className="flex items-center gap-2">
      <span>Command Palette:</span>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>⇧</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </div>
    <div className="flex items-center gap-2">
      <span>Close Tab:</span>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>W</Kbd>
      </KbdGroup>
    </div>
    <div className="flex items-center gap-2">
      <span>New Tab:</span>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>T</Kbd>
      </KbdGroup>
    </div>
  </div>
)

Group

export const Group = () => (
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
  </KbdGroup>
)

On this page