shadcn.io is an independent project built on shadcn/ui
A static list maps F1 through F12 into twelve caps with a small gap. The row is a reference. It is not a set of listeners.
Use the full row on a keyboard reference. In the product, show only the keys you handle. One key beside a Button is easier to learn. In React, Ark UI does not bind the function keys.
Installation
Anatomy
Usage
<div className="rounded-md border bg-background p-4">
<div className="flex gap-1">
{FUNCTION_KEYS.map((key) => (
<Kbd key={key}>{key}</Kbd>
))}
</div>
</div>FAQ
When should I show the whole row?
On a keyboard reference page, or when your app gives most function keys a job. If only one or two do something, show those keys next to their commands instead.
Should the row be interactive?
As a reference, no: Kbd caps are labels. If clicking a key should show what it does, render each one inside a button or a toggle and keep the caps as their content.
Should I group the keys like a keyboard does?
Physical keyboards split them into F1 to F4, F5 to F8 and F9 to F12. Splitting the list into three groups with a wider gap between them makes a long row easier to scan.
How should the row fit on a phone?
Twelve caps in one row overflow narrow screens. Let the row wrap, or switch to a grid of four or six columns at small widths. Most phones have no function keys anyway, so the row matters most on desktop.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
