Kbd

free

Kbd renders compact keyboard hints for shortcuts, menus, and command footers.

Preview

Dark

Navigate: UpDown

Select: Enter

Close: Esc

import Kbd from '@/components/ui/Kbd';

export default function UsageDemo() {
  return (
    <div className="flex flex-col flex-wrap justify-center gap-4">
      <div className="flex items-center gap-2">
        <span className="w-18">Navigate: </span>
        <Kbd>Up</Kbd>
        <Kbd>Down</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <span className="w-18">Select: </span>
        <Kbd>Enter</Kbd>
        
      </div>
      <div className="flex items-center gap-2">
        <span className="w-18">Close: </span>
        <Kbd>Esc</Kbd>
      </div>
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Kbd

Examples

Basic

Kbd renders a native kbd element with the product keycap styling.

Preview

Dark

EscTabEnter⌘K

import Kbd from '@/components/ui/Kbd';

export default function BasicDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Kbd>Esc</Kbd>
      <Kbd>Tab</Kbd>
      <Kbd>Enter</Kbd>
      <Kbd>
        <span>⌘</span>
        <span>K</span>
      </Kbd>
    </div>
  );
}

Combinations

Preview

Dark

Open command menuCtrl+K

Save changesCtrl+S

import Kbd from '@/components/ui/Kbd';

export default function CombinationsDemo() {
  return (
    <div className="grid w-full max-w-sm divide-y divide-border">
      <div className="flex items-center justify-between gap-8 p-4">
        <span>Open command menu</span>
        <span className="inline-flex items-center gap-2">
          <Kbd>Ctrl</Kbd>
          <span>+</span>
          <Kbd>K</Kbd>
        </span>
      </div>
      <div className="flex items-center justify-between gap-8 p-4">
        <span>Save changes</span>
        <span className="inline-flex items-center gap-2">
          <Kbd>Ctrl</Kbd>
          <span>+</span>
          <Kbd>S</Kbd>
        </span>
      </div>
    </div>
  );
}

Icon Content

Preview

Dark

Esc

import { PiArrowElbowDownLeft, PiCommand } from 'react-icons/pi'
import Kbd from '@/components/ui/Kbd';

export default function IconContentDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Kbd aria-label="Command">
        <PiCommand className="text-sm" />
      </Kbd>
      <Kbd aria-label="Return">
        <PiArrowElbowDownLeft className="text-sm" />
      </Kbd>
      <Kbd>Esc</Kbd>
    </div>
  );
}

Custom Class

Preview

Dark

escSpaceF

import Kbd from '@/components/ui/Kbd';

export default function CustomClassDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Kbd className="uppercase tracking-wide">esc</Kbd>
      <Kbd className="w-12 tracking-wide">Space</Kbd>
      <Kbd className="shadow-inset-active">F</Kbd>
    </div>
  );
}

API

Kbd renders a native kbd element. String children receive the component's monospace key-label treatment.

Prop	Description	Type	Default
`children`	Key label or custom node rendered inside the keycap.	`ReactNode`	-
`className`	Additional classes appended to the keycap.	`string`	-
`...nativeKbdProps`	Native props for the underlying `kbd` element.	`NativeKbdProps`	-

Types

type NativeKbdProps = ComponentProps<'kbd'>;