Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Kbd examples · Arrow Keys

Vim Navigation Keys Kbd for React

The H, J, K and L keys in one row, the keys Vim moves the cursor with.

Framework
UI library

People who use Vim move with H, J, K and L, and many web apps support them too, from email clients to code review tools. This React example shows the four keys in one row on a four-column grid, in the order they sit on the keyboard.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

How do I show that HJKL only works outside text fields?

In Vim they work in normal mode; in a web app, they usually work when focus isn't in a text field. Say so next to the keys, for example When not typing.

Do HJKL hints make sense to people who don't use Vim?

Not on their own. Pair them with the arrow keys or with direction labels, and keep the arrow keys working everywhere HJKL does.

All 39 kbd examples