Primitive / Atomstable

Kbd

Keyboard keycap primitive for shortcuts and key hints.

@glinui/uiComponent: kbd

Installation$

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add kbd

Usage$

Kbd renders a semantic <kbd> element styled as a keyboard key cap. It uses uppercase tracking, a monospace font, and a minimum width of min-w-6 to ensure single-character keys remain square. Use it to communicate keyboard shortcuts in documentation, tooltips, or UI hints.

Basic$

⌘

TSX

1import { Kbd } from "@glinui/ui"
2
3export function KbdBasicDemo() {
4return <Kbd>⌘</Kbd>
5}

Examples$

Shortcuts$

Combine multiple Kbd elements with a + separator to represent compound key shortcuts.

⌘+K

TSX

1import { Kbd } from "@glinui/ui"
2
3export function KbdShortcutDemo() {
4return (
5  <div className="flex items-center gap-1">
6    <Kbd>⌘</Kbd>
7    <span className="text-neutral-400">+</span>
8    <Kbd>K</Kbd>
9  </div>
10)
11}

Variants$

⌘⌘⌘⌘

TSX

1import { Kbd } from "@glinui/ui"
2
3export function KbdVariantDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-2">
6    <Kbd variant="default">⌘</Kbd>
7    <Kbd variant="glass">⌘</Kbd>
8    <Kbd variant="outline">⌘</Kbd>
9    <Kbd variant="ghost">⌘</Kbd>
10  </div>
11)
12}

Sizes$

⌘⌘⌘

TSX

1import { Kbd } from "@glinui/ui"
2
3export function KbdSizeDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-2">
6    <Kbd size="sm">⌘</Kbd>
7    <Kbd size="md">⌘</Kbd>
8    <Kbd size="lg">⌘</Kbd>
9  </div>
10)
11}

Multi-Key Sequences$

String full keyboard sequences for step-by-step instructions.

⌃+⇧+P

TSX

1import { Kbd } from "@glinui/ui"
2
3export function KbdSequenceDemo() {
4return (
5  <div className="flex items-center gap-1">
6    <Kbd>⌃</Kbd>
7    <span className="text-neutral-400">+</span>
8    <Kbd>⇧</Kbd>
9    <span className="text-neutral-400">+</span>
10    <Kbd>P</Kbd>
11  </div>
12)
13}

Accessibility$

Kbd renders a native <kbd> element which is recognized by assistive technologies as denoting keyboard input.
Screen readers will announce the content of each <kbd> element; use descriptive key names or Unicode symbols that read naturally.
Avoid using <Kbd> purely for styling — reserve it for actual keyboard key references.

Reduced Motion$

Kbd is a static element with no animation. It is unaffected by prefers-reduced-motion.

API Reference$

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from kbdVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`"default"`	Variant option from kbdVariants.

Source$

TSX

1import { Kbd } from "@glinui/ui"

packages/ui/src/components/kbd.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/kbd.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

KbdProps

`KbdProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from kbdVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`"default"`	Variant option from kbdVariants.