Warren UI

Kbd

Keyboard key chip.

Ctrl+K
Shift+Enter
EscQUICK NAV
Source
"use client"

import { Kbd } from "@/registry/warren/kbd/kbd"

export default function KbdDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <div className="flex items-center gap-1">
        <Kbd>Ctrl</Kbd>
        <span className="font-mono text-[10px] text-muted-foreground">+</span>
        <Kbd>K</Kbd>
      </div>
      <div className="flex items-center gap-1">
        <Kbd>Shift</Kbd>
        <span className="font-mono text-[10px] text-muted-foreground">+</span>
        <Kbd>Enter</Kbd>
      </div>
      <Kbd>Esc</Kbd>
      <span className="font-mono text-[10px] uppercase tracking-wide text-muted-foreground">
        QUICK NAV
      </span>
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/kbd.json

Usage

import { Kbd } from "@/components/ui/kbd"
<Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>

Notes

Kbd renders an inline <kbd> element — a 2px square border on the panel background with 10px mono uppercase text. Use it for key names inside shortcuts, menus, and hint captions.

API Reference

This component has no custom props. It forwards native <kbd> attributes; the type is derived from React.HTMLAttributes<HTMLElement>. All native attributes are supported.

On this page

InstallationUsageNotesAPI Reference