Function Keys Row Kbd for React

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.

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.

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.

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.

The gap between caps is gap-1 on the row; raise it to separate them more. Size the caps with the same classes on each, such as h-8 min-w-8 text-base, as the Large Kbd example does.

Yes. Keep a list of the active keys and give their caps a stronger style, like the primary fill in the Active State example, and fade the rest. Say in text which keys do what, since color alone doesn't reach everyone.