Park UI

Kbd

A typography component for displaying keyboard shortcuts and input.

Shift + Tab

Installation

Usage

Examples

Combinations

Display keyboard shortcuts that require multiple keys pressed simultaneously:

ctrl+shift+del

Modifier Keys

Showcase common modifier keys using their symbolic representations:

Variants

Customize the appearance with different visual styles to match your design:

Sizes

Adjust the size to match surrounding text or interface elements:

Shift + TabShift + TabShift + TabShift + Tab

Inline

Integrate keyboard shortcuts naturally within instructional text:

Press F12 to open DevTools

Props

PropDefaultType
variant'surface'
'solid' | 'surface' | 'outline' | 'subtle' | 'plain'
size'md'
'sm' | 'md' | 'lg' | 'xl'