HapplyUI

Components

Kbd

A keyboard key indicator component for displaying keyboard shortcuts inline.


Installation

bunx @happlyui/cli@latest add kbd

Dependencies

Registry dependencies

These are automatically installed when you add this component.

  • happly-ui-utils

Usage

import * as Kbd from "@/components/ui/kbd"

<Kbd.Root>⌘+K</Kbd.Root>

Examples

Demo

Keyboard shortcut with command icon and key label.

+K
<Kbd.Root>
  <IconCmd className="w-2.5 h-2.5" />
  +K
</Kbd.Root>

API Reference

Kbd.Root

The keyboard key container. Renders as a styled div.

PropTypeDefaultDescription

Previous
Info Grid