shadcn.io is an independent project built on shadcn/ui
One cap reads F12. It is a label for a debugging guide or a support step. Nothing listens for the key.
Do not build a product shortcut on F12. The browser already owns it. Explain a control in a Tooltip instead. In React, Ark UI does not open developer tools.
Installation
Anatomy
Usage
<div className="rounded-md border bg-background p-4">
<Kbd>F12</Kbd>
</div>FAQ
Does F12 open developer tools in every browser?
In Chrome, Edge and Firefox on Windows and Linux, yes. Safari doesn't use F12: turn on its developer features in Settings, then press ⌘⌥I. Chrome and Firefox on Mac also use ⌘⌥I.
Does F12 conflict with anything?
On Mac keyboards, F12 is often a volume key unless Fn is held, which is why ⌘⌥I is the safer Mac shortcut. Some laptops need Fn for every function key.
Is there an F12 for mobile browsers?
No. Connect the phone to a computer and inspect it from the desktop browser: Chrome's remote debugging for Android, Safari's Web Inspector for iPhone and iPad.
Where should the F12 hint appear?
In the step where a guide asks people to open developer tools, next to the Mac shortcut. Support articles should also say which tab to open next, like Console or Network.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
