shadcn.io is an independent project built on shadcn/ui
One cap reads F1. There is no group and no listener. Pointer events stay off.
Put F1 next to Help only when that key really opens it. On the web, a visible Button matters more than the key. In Svelte, Ark UI does not open a help view.
Installation
Anatomy
Usage
<div class="rounded-md border bg-background p-4"><Kbd>F1</Kbd></div>FAQ
When should an app document F1 for help?
When it actually opens your help, typically in desktop-style web apps with a lot of features. In a browser, F1 may open the browser's own help instead unless your page catches it.
Where should the F1 hint appear?
Next to the Help item in a menu, in a help button's tooltip and on the keyboard shortcuts page. It doesn't need to be on screen all the time.
What should F1 open?
Help for what the person is doing: the page or the focused field, not a generic start page. A side panel keeps their work visible while they read.
Does F1 work the same on Mac?
Not by default: on Mac keyboards, F1 lowers the screen brightness unless Fn is held or the function keys are set to standard mode. On Mac, ⌘? is the usual help shortcut.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
