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 Vue, Ark UI does not bind the function keys.
Installation
Anatomy
Usage
<div class="rounded-md border bg-background p-4">
<div class="flex gap-1">
<Kbd v-for="key in FUNCTION_KEYS" :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
Sets v-for="key in FUNCTION_KEYS" and key="key". The rest is on the Kbd page.
