Kbd

Keycap for shortcuts, on its own or grouped into a chord.

Source: 1 file
Dependencies: none
Playground: yes

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the snippet you write to get one.

01Basic

AEscEnter⌘cmd

<Kbd>A</Kbd>

02Variant

⌘⌘⌘⌘

<Kbd variant="default | outline | solid | ghost" />

03Size

⌘⌘⌘

<Kbd size="sm | md | lg" />

04Modifiers

⌘⌥⌃⇧⇪fn

<Kbd>⌘</Kbd> · ⌥ ⌃ ⇧

05Named keys

TabSpace⏎⌫⌦⇥

<Kbd>Tab</Kbd> · Space · ⏎ · ⌫

06Arrows

↑↓←→

<Kbd>↑</Kbd> · ↓ ← →

07Shortcut

⌘+K

Ctrl+Shift+P

<KbdGroup><Kbd>⌘</Kbd> + <Kbd>K</Kbd></KbdGroup>

08Combined key

⌘ KCtrl S⇧ ⌘ P

<Kbd>⌘ K</Kbd>

09Custom color

⌘⏎K

<Kbd className="bg-… text-… border-…" />

10In text

Press

⌘S

to save, or Esc to cancel

Press <Kbd>⌘</Kbd><Kbd>S</Kbd> to save

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Kbd, KbdGroup } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

kbd-example.tsx

import { Kbd, KbdGroup } from "kipui";

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Use the platform's own glyphs (⌘, ⌥, ⇧) rather than spelling the modifiers out — that is what the key is labelled.

Playground

Change the props and the snippet underneath updates with them.

Preview

<Kbd />

⌘

Props

sizemd

variantdefault

<Kbd size="md" variant="default">⌘</Kbd>

API reference

Transcribed from the component's own types. Props with no default are required.

Prop	Default	Description
size"sm" \| "md" \| "lg"	"md"	Cap size.
variant"default" \| "outline" \| "solid"	"default"	Raised, outlined or high-contrast.