Kbd

Keyboard shortcut indicators with hard-edge styling. Each key appears as a small card with crisp borders and solid shadows, like physical keycaps. Now with interactive variants for buttons and click feedback.

Basic Keys

ABCEnterSpaceTabEsc

Modifier Keys

CtrlAltShiftCmdOption

Interactive Keys

Click these keys to see the press animation. Perfect for virtual keyboards or interactive tutorials.

QWERTY

ASDFGH

SpaceEnter

Arrow Keys

Sizes

smCtrl+S

defaultCtrl+S

lgCtrl+S

Variants

defaultCtrlStatic, non-interactive

interactiveCtrlHover & click effects

ghostCtrlSubtle, minimal style

Keyboard Shortcuts

Copy

Ctrl+C

Paste

Ctrl+V

Cut

Ctrl+X

Undo

Ctrl+Z

Save

Ctrl+S

Application Shortcuts Panel

File

New File

CtrlN

Open

CtrlO

Save

CtrlS

CtrlP

Formatting

Bold

CtrlB

Italic

CtrlI

Underline

CtrlU

Strikethrough

CtrlShiftS

Search Bar with Shortcut

K

Press Ctrl K to open the command palette

Interactive Tutorial

Step 1: Navigate

Use the arrow keys to move between items in the list.

Try clicking!

Step 2: Select

Press Enter to select the highlighted item.

Enter

Step 3: Cancel

Press Escape to close the menu without selecting.

Esc

Inline Usage

Press Ctrl + K to open the command palette. Use Tab to navigate between options and Enter to select. Press Esc to close the palette.