Kbd

Inline keyboard shortcut chip. Use `Kbd` for a single key and `KbdGroup` for a chord.

⌘K

<KbdGroup>  <Kbd>⌘</Kbd>  <Kbd>K</Kbd></KbdGroup>

Usage

import { Kbd, KbdGroup } from "@reva/ui";

Wrap a single key in Kbd; combine multiple keys with KbdGroup to render a chord. Both render as <kbd> elements so the markup stays semantic.

Composition

Use the following composition to build a KbdGroup:

KbdGroup
├── Kbd
└── Kbd

Examples

Single key

Esc

<Kbd>Esc</Kbd>

Key combo

⌘⇧P

<KbdGroup>  <Kbd>⌘</Kbd>  <Kbd>⇧</Kbd>  <Kbd>P</Kbd></KbdGroup>

Command palette shortcut

Pair a hint with a KbdGroup to expose the command palette shortcut inline.

Press

⌘K

to search

<HStack align="center" gap={2}>  <Text color="muted-foreground" size="sm">    Press  </Text>  <KbdGroup>    <Kbd>⌘</Kbd>    <Kbd>K</Kbd>  </KbdGroup>  <Text color="muted-foreground" size="sm">    to search  </Text></HStack>

Props

Kbd and KbdGroup forward all native <kbd> / <div> props (e.g. className, aria-*).

Prop	Type	Default	Description
`className`	`string`	—	Extend the base styles.
`children`	`ReactNode`	—	Key label (`Kbd`) or `Kbd` children (`KbdGroup`).

Kbd