shadcn.io is an independent project built on shadcn/ui
Three caps read colon, W, and Q, with a small gap. They are a sequence, not a chord, because they are not in a group. The demo does not run the command.
Use a tight row for a typed command. For keys held together, use a group. If quit would discard work, confirm in an Alert Dialog. In React, Base UI does not run the command.
Installation
Anatomy
Usage
<div className="rounded-md border bg-background p-4">
<div className="flex items-center gap-1">
<Kbd>:</Kbd>
<Kbd>W</Kbd>
<Kbd>Q</Kbd>
</div>
</div>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.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
