eo-n/ui

Displays keyboard shortcuts with appropriate styling.

+K
import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";
 
export function Kbddemo() {
  return (
    <Kbd>
      <KbdKey>⌘</KbdKey>
      <KbdSeparator />
      <KbdKey title="Search">K</KbdKey>
    </Kbd>
  );
}

Installation

npx shadcn@latest add @eo-n/kbd

Usage

Import all parts and piece them together.

import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";
<Kbd>
  <KbdKey>⇧<KbdKey>
  <KbdSeparator />
  <KbdKey>Enter<KbdKey>
</KbdKey>

Predefined Key Titles

The component provides predefined titles for common keyboard symbols.

<Kbd>
  <KbdKey>↩</KbdKey> {/* Shows "Return" on hover */}
  <KbdKey>⌃</KbdKey> {/* Shows "Control" on hover */}
</Kbd>

Personalized Key Titles

You can define custom titles for any key

<Kbd>
  <KbdKey title="Ctrl">⌃</KbdKey>
  <KbdSeparator />
  <KbdKey title="Shift">⇧</KbdKey>
  <KbdSeparator />
  <KbdKey title="Command Palette">P</KbdKey>
</KbdKey>

Examples

Default

+K
import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";
 
export function Kbddemo() {
  return (
    <Kbd>
      <KbdKey>⌘</KbdKey>
      <KbdSeparator />
      <KbdKey title="Search">K</KbdKey>
    </Kbd>
  );
}

Outline

+
import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";
 
export function KbdOutline() {
  return (
    <Kbd variant="outline">
      <KbdKey>⌥</KbdKey>
      <KbdSeparator />
      <KbdKey>⇥</KbdKey>
    </Kbd>
  );
}

Ghost

++F
import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";
 
export function KbdGhost() {
  return (
    <Kbd variant="ghost">
      <KbdKey>⇧</KbdKey>
      <KbdSeparator />
      <KbdKey>⌥</KbdKey>
      <KbdSeparator />
      <KbdKey title="Format">F</KbdKey>
    </Kbd>
  );
}

API Reference

Root

The primary container for displaying keyboard shortcuts.

PropTypeDefault
variant?
"default" | "outline" | "ghost" | null
"default"
size?
"default" | "sm" | "lg" | null
"default"
asChild?
boolean
false
Data AttributeValue
[data-slot]"kbd"

Key

Represents an individual keyboard key.

PropTypeDefault
title?
string
-
asChild?
boolean
false
Data AttributeValue
[data-slot]"kbd-key"

Separtor

A visual separator between multiple keys.

PropTypeDefault
asChild?
boolean
false
Data AttributeValue
[data-slot]"kbd-separtor"