Kbd

Keyboard key cap for shortcuts and hints.

Ctrl+K

Installation

npx @noarka/cli add kbd

tsx

import { Kbd } from "@noarka/ui";

tsx

<p className="text-sm text-muted-foreground">  Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open search.</p>

Key combinations

Join caps with plus separators.

Ctrl+KShift+Ctrl+S

Single keys

Standalone caps for navigation hints.

EscEnterTab⌫

Inline in text

Drop caps into running copy.

Select all with Ctrl + A, then copy with Ctrl + C.

Kbd

Prop	Type	Default
`children` The key cap label, e.g. Ctrl, Esc, or an arrow glyph.	`ReactNode`	`-`
`className` Additional classes merged with the default key cap styles.	`string`	`-`