Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Kbd examples · Sequence

Vim Command Sequence Kbd for React

The colon, W and Q keys in a row for Vim's save-and-quit command.

Framework
UI library

Vim commands are typed, one key after another: colon, W, Q, then Enter to save and quit. This React example shows :, W and Q as three Kbd caps in a tight row with no separators, since the keys are typed in order rather than pressed together.

Preview

Preview width
:WQ

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.

FAQ

What is Vim's command mode?

Typing a colon in normal mode opens a command line at the bottom of the screen. You type a command, like wq, and press Enter to run it, or Esc to cancel.

Why so little space between the keys?

The keys are typed as one word, so gap-1 keeps them together. A wider gap, or an arrow, would suggest separate steps with a pause between them.

Are Vim commands case-sensitive?

Yes: the command is :wq in lowercase, and :WQ fails. The caps show capital letters because that's what keyboards print; say lowercase in the text, or show the command in code next to the keys.

Which Vim commands are worth documenting?

:w to save, :q to quit, :wq to save and quit, :q! to quit without saving, and / to search. Those get most people in and out of Vim.

Why wq instead of write quit?

Vim commands have short forms so they're quick to type: w is short for write and q for quit. The full forms, like :write, work too.

Do screen readers read the sequence correctly?

They read colon, W, Q as separate characters, which matches what to type. Add the command in text, such as Type :wq and press Enter, so the Enter step isn't missed.