shadcn.io is an independent project built on shadcn/ui
Four caps in a four-column grid read H, J, K, and L. They sit in a row, not a cross. No cursor moves.
Use HJKL in a Vim-style app, and say which way each letter goes. For everyone else, show arrows. A Tooltip can carry the direction. In React, Ark UI does not move the cursor.
Installation
Anatomy
Usage
<div className="rounded-md border bg-background p-4">
<div className="grid w-fit grid-cols-4 gap-1">
<Kbd>H</Kbd>
<Kbd>J</Kbd>
<Kbd>K</Kbd>
<Kbd>L</Kbd>
</div>
</div>FAQ
When should I document HJKL instead of arrow keys?
In tools for developers and keyboard-heavy users that support them: editors, terminals, list views in mail and issue trackers. Document the arrow keys as well, since most people don't know HJKL.
Why show HJKL in a row instead of a cross?
They are in a row on the keyboard, on the home row under the right hand. A cross would make them look like arrow keys and hide where the fingers actually go.
Should HJKL show which direction each key moves?
For anyone new to Vim, yes: H left, J down, K up, L right isn't obvious. Add a small label under each cap, or an arrow next to it.
Should I document modifier combinations too?
If your app supports them, list them separately, like Shift J or Ctrl D for half-page down. Keep this row for the four basic moves.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
