Components / Kbd

Kbd

Displays a keyboard key or shortcut. Pure Tailwind on a semantic <kbd> element; no behaviour required.

Examples

A single ZitsKbd renders one key.

⌘ Ctrl Shift Esc

razor

<ZitsKbd>⌘</ZitsKbd>
<ZitsKbd>Ctrl</ZitsKbd>
<ZitsKbd>Shift</ZitsKbd>
<ZitsKbd>Esc</ZitsKbd>

Group

Wrap multiple keys in ZitsKbdGroup to compose a shortcut.

⌘ K Ctrl + Shift + P

razor

<ZitsKbdGroup>
    <ZitsKbd>⌘</ZitsKbd>
    <ZitsKbd>K</ZitsKbd>
</ZitsKbdGroup>

<ZitsKbdGroup>
    <ZitsKbd>Ctrl</ZitsKbd>
    <span class="text-muted-foreground">+</span>
    <ZitsKbd>Shift</ZitsKbd>
    <span class="text-muted-foreground">+</span>
    <ZitsKbd>P</ZitsKbd>
</ZitsKbdGroup>

Installation

Copy the component source into your project with the CLI.

Terminal bash

navius add kbd

API reference

ZitsKbd and ZitsKbdGroup each render a <kbd> and forward all extra attributes.

Prop	Type	Default
ChildContent	RenderFragment?	-
Attributes	IDictionary<string, object>?	-