eo-n/ui

⌘+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.

Prop	Type	Default
`variant?`	`"default" \| "outline" \| "ghost" \| null`	`"default"`
`size?`	`"default" \| "sm" \| "lg" \| null`	`"default"`
`asChild?`	`boolean`	`false`

Data Attribute	Value
`[data-slot]`	`"kbd"`

Key

Represents an individual keyboard key.

Prop	Type	Default
`title?`	`string`	-
`asChild?`	`boolean`	`false`

Data Attribute	Value
`[data-slot]`	`"kbd-key"`

Separtor

A visual separator between multiple keys.

Prop	Type	Default
`asChild?`	`boolean`	`false`

Data Attribute	Value
`[data-slot]`	`"kbd-separtor"`

Kbd

On this page