shadcn.io is an independent project built on shadcn/ui
Four caps in a row read Home, End, PgUp, and PgDn. The names match the abbreviations on most keyboards. They are not a chord, and they do not move a cursor.
Use them in editor help. For one step at a time, show arrow keys instead. A Tooltip can name what each key does. In Svelte, Ark UI does not scroll the page.
Installation
Anatomy
Usage
<div class="rounded-md border bg-background p-4"><div class="flex gap-1"><Kbd>Home</Kbd><Kbd>End</Kbd><Kbd>PgUp</Kbd><Kbd>PgDn</Kbd></div></div>FAQ
Do Home and End work the same on Mac?
No. In macOS text fields, Home and End scroll the view without moving the cursor; ⌘← and ⌘→ go to the start and end of the line. Mac laptops have no Home or End keys at all: Fn with the arrow keys stands in for Home, End, Page Up and Page Down.
When should I document editing keys for text fields?
In apps with long text or code, like editors and note-taking tools, and in keyboard reference pages. Simple forms don't need them: browsers handle these keys in fields already.
Should I document PgUp and PgDn for paged content?
If your app maps them to its own pages, like slides or a paged table, yes. Otherwise they scroll the page, which people already expect.
What combinations work with the editing keys?
On Windows and Linux, Ctrl Home and Ctrl End jump to the start and end of the document, and Shift with any of them extends the selection. On macOS, use ⌘↑ and ⌘↓ for the document and Shift to select.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
