Kbd

Displays a keyboard key or shortcut combination.

⌘+k⌘+⇧+p⌃+⌥+⌫

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/kbd.json

Usage

Import from the master file. Pass `keys` for a combo or children for a single key.

TSImport

import { Kbd } from "@/components/ui/kbd";

TSExample

import { Kbd } from "@/components/ui/kbd";

export function Example() {
  return <Kbd keys={["cmd", "k"]} />;
}

Composition

Anatomy of the Kbd primitive.

Kbd                              (single component — pass everything as props)
├── keys={["cmd","k"]}           (platform-aware combo; ⌘ on mac, Ctrl on windows)
├── separator="+"                (drawn between keys; default "+")
├── platform="auto | mac | windows"
├── size="sm | md | lg"          (default "sm")
├── variant="default | primary | secondary | outline | ghost | danger"
├── pressed                      (pressed-in look)
├── disabled
└── children                     (a single key, when not using `keys`)

Single keys

Drop any glyph in as children for a one-off key cap.

⌘KEsc↵

Sizes

`sm` (default), `md`, and `lg`.

⌘⌘⌘

Variants

Six tones: `default`, `primary`, `secondary`, `outline`, `ghost`, and `danger`.

EscEscEscEscEscEsc

Key combinations

Pass `keys={[…]}` to render a combo. Modifier names resolve to platform symbols and are joined by `separator` (default `+`).

⌘+k⌘+⇧+p⌃+⌥+⌫

Special keys

Named keys like `enter`, `escape`, `tab`, `space`, and the arrows resolve to their symbols automatically.

↵⎋⇥␣↑↓←→

Platform

`platform="auto"` detects the OS client-side; force `mac` or `windows` to preview either symbol set.

auto⌘+⇧+k

mac⌘+⇧+k

windowsCtrl+Shift+k

States

Normal, `pressed`, and `disabled`.

KKK

API Reference

Props exposed by the Kbd component.

Prop	Type	Default	Description
`keys`	string[]	—	Render a combo from named keys (e.g. `["cmd","k"]`). Modifier names resolve to platform symbols; anything unknown renders verbatim.
`separator`	string	"+"	Drawn between keys when using `keys`.
`platform`	"auto" \| "mac" \| "windows"	"auto"	Key symbol set. `auto` detects the OS client-side (⌘/⌥/⌃ on mac, Ctrl/Alt on windows).
`size`	"sm" \| "md" \| "lg"	"sm"	Key cap size.
`variant`	"default" \| "primary" \| "secondary" \| "outline" \| "ghost" \| "danger"	"default"	Visual tone of the key cap.
`pressed`	boolean	false	Pressed-in look (nudged down, flattened shadow).
`disabled`	boolean	false	Dim and mark the key as non-interactive.
`children`	ReactNode	—	A single key/glyph, used when `keys` is not provided.
`className`	string	—	Override or extend the resolved variant classes.