Kbd

Labels a keyboard key. Monospace cap with a 1px frame and heavier bottom edge.

Preview

⌘K

In action

Key

Save with ⌘ S

When to use

Use it for

Showing a shortcut next to a command or in help copy.
KbdPair to keep a chord together.

Not for

Code; use Chip.
Buttons; a key cap is not a control.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Kbd, KbdPair } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/kbd.

2. Vendor the source

npx @noorddev/vlak-cli add kbd

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/kbd.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Kbd, KbdPair } from "@noorddev/vlak-react";

<KbdPair><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdPair>

Props

Kbd

Also accepts HTMLAttributes<HTMLElement>.

KbdPair

Also accepts HTMLAttributes<HTMLSpanElement>.

Accessibility

Renders a native <kbd>; screen readers read the characters. Spell out modifier symbols in surrounding text when they matter.

Markup

<kbd class="rs-kbd">⌘</kbd> <kbd class="rs-kbd">K</kbd>

Classes

.rs-kbd.rs-kbd-pair