Primitive / Atom

Kbd

Keyboard keycap primitive for shortcuts and key hints.

Edit on GitHub

pnpm dlx @glinui/cli@latest add kbd

Keyboard shortcuts

Press ? anywhere to open this list.

Navigation

Open command paletteCtrlK

Go to dashboardGD

Toggle sidebarCtrlB

Editing

SaveCtrlS

UndoCtrlZ

Duplicate lineShiftAltDown

Installation

Install from

pnpm dlx @glinui/cli@latest add kbd

Prefer the package?

Usage

Inline hints

A search field hint, keys in running text and three sizes.

CtrlK

Press Esc to close, Enter to open the first result.

smmdlg

import { MagnifyingGlass } from "@phosphor-icons/react"
import { Input, Kbd } from "@glinui/ui"


export function Demo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <label className="relative block">
        <span className="sr-only">Search</span>
        <MagnifyingGlass aria-hidden className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--color-muted)]" />
        <Input placeholder="Search docs" className="pl-9 pr-16" />
        <span className="pointer-events-none absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
          <Kbd size="sm">Ctrl</Kbd>
          <Kbd size="sm">K</Kbd>
        </span>
      </label>
      <p className="text-sm text-[var(--color-muted)]">
        Press <Kbd size="sm">Esc</Kbd> to close, <Kbd size="sm">Enter</Kbd> to open the first result.
      </p>
      <div className="flex flex-wrap items-center gap-3">
        <Kbd size="sm">sm</Kbd>
        <Kbd size="md">md</Kbd>
        <Kbd size="lg">lg</Kbd>
      </div>
    </div>
  )
}

Shortcuts

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

import { Kbd } from "@glinui/ui"

export function KbdShortcutDemo() {
  return (
    <div className="flex items-center gap-1">
      <Kbd>⌘</Kbd>
      <span className="text-neutral-400">+</span>
      <Kbd>K</Kbd>
    </div>
  )
}

Variants

import { Kbd } from "@glinui/ui"

export function KbdVariantDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Kbd variant="default">⌘</Kbd>
      <Kbd variant="glass">⌘</Kbd>
      <Kbd variant="outline">⌘</Kbd>
      <Kbd variant="ghost">⌘</Kbd>
    </div>
  )
}

Sizes

import { Kbd } from "@glinui/ui"

export function KbdSizeDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Kbd size="sm">⌘</Kbd>
      <Kbd size="md">⌘</Kbd>
      <Kbd size="lg">⌘</Kbd>
    </div>
  )
}

Multi-Key Sequences

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

import { Kbd } from "@glinui/ui"

export function KbdSequenceDemo() {
  return (
    <div className="flex items-center gap-1">
      <Kbd>⌃</Kbd>
      <span className="text-neutral-400">+</span>
      <Kbd>⇧</Kbd>
      <span className="text-neutral-400">+</span>
      <Kbd>P</Kbd>
    </div>
  )
}

Accessibility

Uses semantic `<kbd>` element for keyboard shortcuts.
`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

No motion-dependent behavior.

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

API Reference

Prop	Type	Required	Default	Description
`variant`	`SurfaceVariant \| "default" \| "primary" \| "secondary" \| "destructive" \| "success" \| "warning" \| "info" \| "raised" \| "frosted"`	No	`ambient (glinr)`	Surface variant. Omit to follow the ambient design style (glinr by default, plain for minimal, glass for glass).
`tone`	`SurfaceTone`	No	`neutral`	Colour tone for the vocabulary variants.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Keycap size.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Kbd } from "@glinui/ui"

Source Files

kbd.tsx

Dependencies

@glinui/ui

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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

KbdProps

`KbdProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`-`	-
`tone`	`SurfaceTone`	No	`-`	-
`variant`	`SurfaceVariant \| "default" \| "primary" \| "secondary" \| "destructive" \| "success" \| "warning" \| "info" \| "raised" \| "frosted"`	No	`-`	Visual variant. Omit for the ambient design style (glinr: tactile raised key).

Kbd