Kbd

Installation

npx shadcn@latest add @uqudo/kbd

Usage

import { Kbd, KbdGroup } from "@/components/uqudo/ui/kbd"

<Kbd>⌘</Kbd>

Combine keys with KbdGroup:

<KbdGroup>
  <Kbd>⌘</Kbd>
  <span>+</span>
  <Kbd>K</Kbd>
</KbdGroup>

Examples

Group

In a button

Kbd is pointer-events-none, so it can sit inside a button or a tooltip without stealing clicks. It also adapts its background when rendered inside an input group or a tooltip.

API Reference

Kbd

KbdGroup

Data attributes